jQuery事件总结

Posted 2020-10-05

jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。

click事件触发需要以下几点：

click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发。

dblclick事件触发需要以下几点：

dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发

鼠标指针在元素里面时点击。
鼠标指针在元素里面时释放。
鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。
鼠标指针在元素里面时再次释放。
注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

mousedown事件触发需要以下几点：

mousedown强调是按下触发
如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件
任何鼠标按钮被按下时都能触发mousedown事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
mouseup事件触发需要以下几点：

mouseup强调是松手触发，与mousedown是相反的
mouseup与mousedown组合起来就是click事件
如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件
任何鼠标按钮松手时都能触发mouseup事件
用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mousemove事件触发需要以下几点：

mousemove事件是当鼠标指针移动时触发的，即使是一个像素
如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

jQuery当中同样提供了这样的事件来监听用户的移入、移出操作，mouseover()与mouseout()事件

经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何html元素都可以接受此事件。

关键点就是：冒泡的方式处理问题！！！

submit事件，监听下提交表单的这个动作。

 

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
jQuery处理如下：

 

$("#target").submit(function(data) {
　　return false; //阻止默认行为，提交表单
});

keydown是在键盘按下就会触发
keyup是在键盘松手就会触发

on（bind）推荐on绑定事件   事件委托原理是事件冒泡

（阻止事件冒泡w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true）

（阻止默认行为w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;）

基本用法：.on( events ,[ selector ] ,[ data ] )

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
来源:http://caibaojian.com

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素（事件委托，通过事件对象区别触发元素）

        <div class="list">
            <ul>
                <li>点击：触发第一个li</li>
                <li>点击：触发第二个li</li>
                <li>点击：触发第三个li</li>
                <li>点击：触发第四个li</li>
            </ul>
        </div>
    <script type="text/javascript">
        //多事件绑定一
        $("ul").on(‘click‘,function(e){
           alert(‘触发的元素是内容是: ‘ + e.target.textContent)//点击依次弹对应的li
        })
    </script> 

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

event.type：获取事件的类型
触发元素的事件类型
$("a").click(function(event) {
　　alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
event.preventDefault() 方法：阻止默认行为
这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3
event.currentTarget : 在事件冒泡过程中的当前DOM元素
冒泡前的当前触发事件的DOM对象, 等同于this.
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

trigger() 方法触发被选元素的指定事件类型

$(selector).trigger(event,[param1,param2,...])

$(selector).trigger(eventObj)（规定事件发生时运行的函数。）

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$(‘#ele‘).on(‘say‘, function(event,param1,param2) {
　　alert("自触自定义时间")
});
trigger触发浏览器事件与自定义事件区别：

自定义事件对象，是jQuery模拟原生实现的
自定义事件可以传递参数

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

triggerHandler与trigger的用法是一样的，不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined