为了账号安全,请及时绑定邮箱和手机立即绑定
  • 'e'='event'=触发事件的元素 'this'=绑定事件的元素 经过简单的实验,觉得e.target是实际的触发事件的元素,而this是给哪个元素绑定了事件,结合这个例子 e.target是li,this是ul,个人见解 <script type="text/javascript"> //多事件绑定一 $("ul").on('click',function(e){ alert('触发的元素是内容是: ' + e.target.textContent) $(e.target).css('color','red') // $(this).css('color','red') }) </script> 这个委托的意思就是减少事件绑定, $("li").on('click' 为每个li都绑定click事件 $("ul").on('click' 只为ul绑定click事件 通过事件冒泡来执行事件 网页优化的一种
    查看全部
  • 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除 绑定2个事件 删除一个事件 删除所有事件 快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
    查看全部
  • mouseenter事件和mouseover的区别 关键点就是:冒泡的方式处理问题
    查看全部
  • on()的高级用法 委托机制 .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元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
    查看全部
    0 采集 收起 来源:on()的高级用法

    2018-03-22

  • on()的多事件绑定 jQuery on()方法是官方推荐的绑定事件的一个方法。 基本用法:.on( events ,[ selector ] ,[ data ] ) $("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式 最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看 多个事件绑定同一个函数 $("#elem").on("mouseover mouseout",function(){ }); 通过空格分离,传递不同的事件名,可以同时绑定多个事件 多个事件绑定不同函数 $("#elem").on({ mouseover:function(){}, mouseout:function(){}, }); 通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法 将数据传递到处理程序 function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕课网 } $( "button" ).on( "click", { name: "慕课网" }, greet ); 可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
    查看全部
  • keypress和keydown有什么区别?????? 虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown. 说KeyDown是按下, KeyPress是按下并松开, 是不对的. 如果你一直按着键呢? 这时不断地产生KeyDown和KeyPress.
    查看全部
  • 鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件,将用户行为分解成2个动作,键盘按下与松手,针对这样的2种动作,jQuery分别提供了对应keydown与keyup方法来监听 keydown事件: 当用户在一个元素上第一次按下键盘上字母键的时候,就会触发它。使用上非常简单,与基本事件参数处理保持一致,这里使用不在重复了,列出使用的方法
    查看全部
  • jQuery表单事件之submit事件 提交表单是一个最常见的业务需求,比如用户注册,一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作 使用上非常简单,与基本事件参数处理保持一致 方法一:$ele.submit() 方法二:$ele.submit( handler(eventObject) ) 方法三:$ele.submit( [eventData ], handler(eventObject) ) 具体能触发submit事件的行为: <input type="submit"> <input type="image"> <button type="submit"> 当某些表单元素获取焦点时,敲击Enter(回车键) 这里需要特别注意: form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为 传统的方式是调用事件对象 e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可 jQuery处理如下: $("#target").submit(function(data) { return false; //阻止默认行为,提交表单 });
    查看全部
  • 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。 这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。 使用上非常简单: 方法一:.select() 触发元素的select事件: 方法二:$ele.select( handler(eventObject) ) 绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数 这样可以针对事件的反馈做很多操作了 方法三:$ele.select( [eventData ], handler(eventObject) ) 使用与方法二一致,不过可以接受一个数据参数,这样的处理是为了解决不同作用域下数据传递的问题
    查看全部
  • 本节重点
    查看全部
  • 本节重点!! 本课最难点冒泡!!
    查看全部
  • jQuery表单事件之change事件 开发者可以通过change事件去监听<input>元素,<textarea>和<select>元素的值的改变 input元素 监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发。 select元素 对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发 textarea元素 多行文本输入框,当有改变时,失去焦点后触发change事件 输出结果: <div id="result"></div> <script type="text/javascript"> //监听input值的改变 $('.target1').change(function(e) { $("#result").html(e.target.value) }); //监听select: $(".target2").change(function(e) { $("#result").html(e.target.value) }) //监听textarea: $(".target3").change(function(e) { $("#result").html(e.target.value) }) </script>
    查看全部
  • 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的本质区别: 举个简单的例子 其中input元素可以触发focus()事件 div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了focusin()事件。 blur与focusout也亦是如此
    查看全部
  • jQuery鼠标事件之focusout事件 失去焦点 $("input:first").focusout(function() { $(this).css('border','2px solid red') })
    查看全部
  • jQuery鼠标事件之focusin事件 获取焦点
    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery事件处理

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!