1、事件绑定
事件绑定，可以向像下图第一段那样直接写，不过现在更推荐下面的写法，第一个参数是要绑定的事件，第二个参数是事件处理函数
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="btn" value="click"></button>
<script>
$("#btn").on("click",function(){
$('<li>'+Math.random()+'</li>').appendTo("ul");
});
$("li").on("click",function(){
console.log($(this).html());
});
</script>
</body>这样写的话，只有ul原有的li可以在控制台输出文本内容，但是后加入的li不行，可以改成给ul绑定，也就是事件委托
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button id="btn" value="click"></button>
<script>
$("#btn").on("click",function(){
$('<li>'+Math.random()+'</li>').appendTo("ul");
});
// $("li").on("click",function(){
// console.log($(this).html());
// });
$("ul").on("click",function(e){
if(e.target.tagName =="LI"){
// console.log(e.target.innerHTML);
console.log($(e.target).html());
}
})
</script>
</body>换成给父元素ul绑定事件，然后判断事件源是否是li,注意LI大写，因为e.target是原生DOM对象，不是jQuery对象，注意区分用innerHTML 还是 html()
在jQuery中兼容性很好，不用写e = e || window.event 和var target = e.target ||e.srcElement;可以上来直接判断事件源
上述是我们根据事件委托原理做的，但其实jQuery的on方法已经能实现上述的委托操作了，语法如下，第一个参数是要绑定的事件，第二个参数是实际要触发的元素
$("ul").on("click","li",function(){ //li才是实际要触发的元素
console.log($(this).html());//this代表当前点击的li
});如果你页面中有后生成的元素，那么就一定会用到事件委托
2.取消绑定的事件off
按理说，先绑定，后取消，不应该相当于没绑定吗，但是他还会执行，咋办呢，他俩的事件处理函数必须相同
同理，我们的那俩函数方法虽然一样，但是却不是一个东西，可以通过吧函数提出来，赋值给一个变量，这样他俩就是一个函数了
3.trigger 触发事件
这段代码的意思是 第一段给上面的输入框绑定获取焦点事件。第二段 通过给下面的按钮绑定事件，然后触发输入框的获取焦点事件
用triggerHander的话 ，没有蓝色的边框，也没有闪动的光标，说明他只触发上面写的，不会触发默认的事件
4.focus原生和jQuery的都不支持事件冒泡，focusin支持事件冒泡
5.hover
第一个参数是鼠标划入事件，第二个参数是鼠标滑出事件， hover可以看成是mouseover 和mouseout的结合体
6.mouseover 和mouseout 会触发事件冒泡
7、如果你不想要事件冒泡。可以用mousenter mouseleave
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
