-
加深印象 event.type 获取事件类型 event.pageX和event.pageY 获取当前鼠标的页面坐标 event.preventDefault() 阻止默认行为 event.stopPropagation() 阻止事件冒泡 event.which 获取鼠标单击时的触发按键 event.currentTarget 事件冒泡过程中的当前dom元素 等同于this event.target 直接接受事件的dom元素 通常和this一起确定事件是否为冒泡触发 和this都时dom对象查看全部
-
click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作 方法一：$ele.click() 方法二：$ele.click( handler(eventObject) ) 方法三：$ele.click( [eventData ], handler(eventObject) )查看全部
-
jQuery自定义事件之trigger事件 众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。 在jQuery通过on方法绑定一个原生事件 $('#elem').on('click', function() { alert("触发系统事件") }); alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？ 正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件 所以我们可以这样： $('#elem').trigger('click'); 在绑定on的事件元素上，通过trigger方法就可以调用到alert了，挺简单！ 再来看看.trigger是什么？ 简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为 trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数 $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自触自定义时间") }); $('#elem').trigger('Aaron',['参数1','参数2']) trigger触发浏览器事件与自定义事件区别？ 自定义事件对象，是jQuery模拟原生实现的 自定义事件可以传递参数查看全部
-
jQuery事件对象的属性和方法 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 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)的使用；查看全部
-
通过实际的一个小案例，从而来了解事件对象的作用 <ul> <li class="even1"></li> <li class="even2"></li> <li class="even2"></li> ......... </ul> ul有N个子元素li(这里只写了3个)，如果我要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，这样写法很符合逻辑，但是同时有显得繁琐 因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的"事件委托" 事件没直接和li元素发生关系，而且绑定父元素了。由于浏览器有事件冒泡的这个特性，我们可以在触发li的时候把这个事件往上冒泡到ul上，因为ul上绑定事件响应所以就能够触发这个动作了。唯一的问题怎么才知道触发的li元素是哪个一个？ 这里就引出了事件对象了 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁 回到上面的问题，既然事件对象是跟当前触发元素息息相关的，所以我们就能从里面相关的信息，从事件对象中找到 event.target event.target target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托 简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素查看全部
-
卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除 绑定2个事件 $("elem").on("mousedown mouseup",fn) 删除一个事件 $("elem").off("mousedown") 删除所有事件 $("elem").off("mousedown mouseup") 快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁 $("elem").off()查看全部
-
为什么要用事件委托？事件委托有什么好处？ 一般来说，dom是需要有事件处理程序的，我们会直接给他事件处理程序就好了，那么如果是很多dom元素需要添加事件处理呢？ 比如 100个li，每个li 都有相同的click点击事件，可能我们会有for循环的方法，来遍历所有li，然后为每个li添加绑定事件。 这么做毫无疑问对性能有很大的影响； 在js中，访问dom次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间 如果采用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只交互一次，这样减少了dom交互次数，性能就会提升；查看全部
-
委托机制 .on( events ,[ selector ] ,[ data ], handler(eventObject) ) 在on的第二参数中提供了一个selector选择器，简单的来描述下 参考下面3层结构 <div class="left"> <p class="aaron"> <a>目标节点</a> //点击在这个元素上 </p> </div> 给出如下代码： $("div").on("click","p",fn) 事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数查看全部
-
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)的使用；查看全部
-
mouseenter事件和mouseover的区别 关键点就是：冒泡的方式处理问题 简单的例子： mouseover为例： <div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> </div> 如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果: p元素响应事件 div元素响应事件 这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发 所以在这种情况下面，jQuery推荐我们使用 mouseenter事件 mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发查看全部
-
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数 handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数查看全部
-
在我看来你首先没弄清楚 e是什么，其次才是 type是什么 e是on()给函数返回的一个事件，可以理解为 $("#test3").on({ mousedown: function(e) { $(this).text('触发事件：' + e.type) }, mouseup: function(e) { $(this).text('触发事件：' + e.type) } }) on方法，给匿名函数添加了一个事件e，这个e就代表当前事件本身： mousedown: function(e)，这里的e就是mousedown事件 mouseup: function(e)，这里的e就是mouseup事件 再来理解type：所有事件都有一个类型，事件的类型通过type来查询，e.type就是获取e事件的事件类型。 在这里，#test3这个元素被添加了 mousedown事件和mouseup事件， $(this)指向了#test3这个元素，那么正对这个元素调用 e.type，就是获取在这个元素上的事件类型 所以通俗的翻译， mousedown: function(e) { $(this).text('触发事件：' + e.type) } 就是当在#test3上面鼠标按下时，输出 #test3上触发了哪个事件类型 不恰当的解释就是，我打（mousedown）了你（#test3），然后问一个旁观者（function），我刚才对你做了什么事（e.type）查看全部
-
event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素查看全部
-
1,event.type：获取事件的类型 2,event.preventDefault() 方法：阻止默认行为 3,event.stopPropagation() 方法：阻止事件冒泡 事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 4,event.which：获取在鼠标单击时，单击的是鼠标的哪个键 5,event.currentTarget : 在事件冒泡过程中的当前DOM元素 6，this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素； .this和event.target都是dom对象 如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用； 4,查看全部
-
这个知识点好查看全部
举报
0/150
提交
取消