jQuery注册
单个事件注册
语法:
element.事件(function() {})
$ ("div").click(function(){事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、 blur. focus、 change、 keydown、 keyup、 resize、 scroll等
on注册事件
on注册简单事件
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",'span', function() {});
on注册事件的语法:
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events,[selector],[data],handler);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<ol>
</ol>
<script>
$(function(){
//1.单个事件注册
// $("div").click(function(){
// $(this).css("background","purple");
// });
// $("div").mouseenter(function(){
// $(this).css("background","red");
// });
//2.事件处理on
$("div").on({
mouseenter: function(){
$(this).css("background","red");
},
click: function(){
$(this).css("background","purple");
}
});
//on实现事件委托
$("ul").on("click","li",function(){
alert(11);
});
//click是绑定在ul身上的,但是触发的对象是ul里面的小li
//3.on可以给动态创建的元素绑定事件
$("ol").on("click","li",function(){
alert(11);
})
var li = $("<li>后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
</html>
off事件解绑
off()方法可以移除通过on()方法添加的事件处理程序。
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
</div>
<ul>
<li>11111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333333333</li>
</ul>
<p>我是p标签</p>
<script>
$(function(){
$("div").on({
click: function(){
console.log("我点击了");
},
mouseover: function(){
console.log("我鼠标经过了");
}
});
//1.事件解绑off
// $("div").off();//这个是解除了div身上的所有事件
$("div").off("click");//这个是解除了div身上的点击事件
//2.one()但是它只能触发事件一次
$("p").one("click",function(){
alert(11);
})
})
</script>
</body>
</html>
触发事件
$("selector").click(); //触发 click事件
$("selector").trigger("click");
$("selector").traggerHandler("click");就是不会触发元素的默认行为,没有光标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<script>
$(function(){
$("div").on("click",function(){
alert(11);
});
//自动触发事件
//1.元素.事件()
$("div").click();
//2.元素.trigger("事件")
$("div").trigger("click");
//3.元素.triggerHandler("事件")
//就是不会触发元素的默认行为,没有光标
$("div").traggerHandler("click");
$("input").on("focus",function(){
$(this).val("你好");
});
$("input").traggerHandler("focus");
})
</script>
</body>
</html>
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置(忽视滚动条)
//pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。