-
jQuery鼠标事件之click与dbclick事件 $("button").click(function(){......}) // 单击触发function $("button").click(1111,function(e){......}) // 单击触发function，并传入参数1111 $("button").dbclick(function(){......}) // 双击触发function $("button").dbclick(1111,function(e){......}) // 双击触发function，并传入参数1111查看全部
-
jquery鼠标事件click监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的。 方法一：$ele.click(); 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少。 $ele.click(handler(eventObject)) 绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素。查看全部
-
你们看focus和blur事件都绑到了div上，你点击input或者点完移开失去焦点当然没反应了，因为input没有绑定事件啊。 而focusin和focuout也绑在div上，为啥有反应呢？ 因为后者在你点input的时候会一级一级的往上面查父元素，如果父元素有事件就执行了，所以你看到了效果。这叫事件冒泡。查看全部
-
focus()在元素本身产生，focusin()在元素包含的元素中产生查看全部
-
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发查看全部
-
event.stopPropagation();可以阻止冒泡事件查看全部
-
e.target是该目标Dom对象查看全部
-
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)的使用；查看全部
-
卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除 绑定2个事件 $("elem").on("mousedown mouseup",fn) 删除一个事件 $("elem").off("mousedown") 删除所有事件 $("elem").off("mousedown mouseup") 快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁 $("elem").off()查看全部
-
on()的高级用法 针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了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元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数查看全部
-
on()的多事件绑定 之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。 基本用法：.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同 $("#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 ); 可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的查看全部
-
select事件只能用于<input>元素与<textarea>元素查看全部
-
<script type="text/javascript"> //input聚焦 //给input元素增加一个边框 $("input:first").focusin(function() { $(this).css('border','2px solid red') }) </script> <script type="text/javascript"> //不同函数传递数据 function fn(e) { $(this).val(e.data) } function a() { $("input:last").focusin('慕课网', fn) } a(); </script>查看全部
-
<script type="text/javascript"> // hover()方法是同时绑定 mouseenter和 mouseleave事件。 // 我们可以用它来简单地应用在 鼠标在元素上行为 $("p").hover( function() { $(this).css("background", 'red'); }, function() { $(this).css("background", 'yellow'); } ); </script>查看全部
举报
0/150
提交
取消