python Web：jQuery--事件

最新推荐文章于 2023-08-25 08:00:47 发布

梦寐_

最新推荐文章于 2023-08-25 08:00:47 发布

阅读量149

点赞数

分类专栏： python Web 文章标签：事件

本文链接：https://blog.csdn.net/HHG20171226/article/details/95163562

版权

python Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

事件

页面加载完成之后再执行

$(document).ready(function(){
    //加载完成之后执行的操作
});
$().ready(function(){
  //加载完成之后执行的操作
});
$(function(){
  //加载完成之后执行的操作
});

// 与原生onload事件的区别：
// 原生onload事件不能多次使用，后面的会把前面的覆盖掉，只执行最后书写的onload
// jQuery中的ready方法，也表示文档加载完毕，可以使用多次，所有的相关函数都会被执行，不会被覆盖
// 原生onload事件，等待页面中DOM节点及所有页面资源全部加载完成才执行
// jQuery中的ready方法，只等待DOM数加载完成就执行相关函数

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="jquery-1.11.3.js"></script>
  <script>
	$(document).ready(function (){
		var $div = $('div');
		console.log($div);
	});
	$().ready(function (){
		console.log($('div'));
	});
	$(function (){
		console.log($('div'));
		//事件绑定
		$('div').bind('click',function (evt) {
			alert("div被点击");
		});
 
		$('h1').click(function (evt){
			alert("h1被点击");
			console.log(this);
			console.log(evt);
			console.log(evt.offsetX);
		});
	});
 
	/*
	window.onload = function(){
		console.log("window.onload1");
	};
	window.onload = function(){
		console.log("window.onload2");
	};
	window.onload = function(){
		console.log("window.onload3");
	};
	*/
 
  </script>
 
 </head>
 <body>
	<div style="width:200px;height:200px;background:red;"></div>
	<h1 style="width:200px;height:200px;background:green;"></h1>
 </body>
</html>

jQuery事件绑定

方式1
$obj.bind('事件名称',function(){
    //事件处理函数
});
注意：
事件名称省略 on前缀
方式2
$obj.事件名称(function(){
    //事件处理
});
注意：
事件名称省略 on前缀

解除事件unbind()
　　unbind()是bind()事件的对应事件，从元素上删除一个以前附加的事件处理程序。每个用bind()方法绑定的事件处理程序可以使用unbind()移除
　　若unbind()方法没有任何参数，可以删除元素上所有绑定的处理程序

<style>
.entered{background-color:lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">删除事件</button>
<script>
//绑定多个事件
$('#btn').bind({
  click: function() {
       alert(1);
  },
  mouseenter: function() {
    $(this).toggleClass('entered');
  },
  mouseleave: function(){
      $(this).toggleClass('entered');
  }
});
$('#reset').click(function(){
    $('#btn').unbind();
})
</script>

jQuery 事件对象

在绑定事件时，允许传递参数表示事件对象
$obj.bind('click',function(event){
    console.log(event);
});
事件对象的使用方法，与原生的一致

事件处理

	//事件委托
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和
        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)