-
?
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
另外需要注意的是：
click与mousedown的区别：
click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发
查看全部 -
<!DOCTYPE html><html><head><metahttp-equiv="Content-type"content="text/html; charset=utf-8"/><title></title><scriptsrc="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script></head><body><buttonid="btn">页面加载触发自定义事件</button><buttonid="btn1">页面加载触发自定义事件并且传参</button><pid="test"></p><script>$("#btn").on("testClick", function(){alert("自定义事件触发")})// 页面加载自动执行自定义事件testClick$("#btn").trigger("testClick");// 自定义事件并且传参$("#btn1").bind("myClick", function (event, message1, message2) {$("#test").append("<p>" + message1 + message2 + "</p>");});$("#btn1").trigger("myClick",["我的自定义","事件"]);</script></body></html>查看全部 -
着重说一下 “var n = parseInt(last.text(), 10);”这一句， 我先摘抄一下W3School的内容：“parseInt() 函数可解析一个字符串，并返回一个整数。”他的作用就是解析出字符串中第一个出现的数字，第一个参数就是要求解析的字符串，第二个参数是对第一个参数的补充，是数字几就代表第一个参数中的数字是什么进制。例如：parseInt("11",2); //返回 3 (2+1) 就是说 把“11”当做二进制看然后解析为十进制数字“3”.
查看全部 -
event.stopPropagation(); //阻止冒泡
查看全部 -
就是因为事件冒泡的原因，你可以在span事件函数里最下面加个return false;就不会再出现外层div元素被单击了！
查看全部 -
点击li冒泡到ul，ul绑了事件，这就是冒泡，e.target指的是被点击的元素，就是你点的那个li
查看全部 -
e表示这个事件，target表示这个事件的目标e只是指这个事件，而e.target是指事件触发的dom，相当于this。区别是this会冒泡；你要用只能用this.value或e.target.value。需要冒泡时候就用this.value不用冒泡时候就用e.target.value
查看全部 -
function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕课网 } $( "button" ).on( "click", { name: "慕课网" }, greet );这里
$( "button" ).on( "click", { name: "慕课网" }, greet )表示button执行onclick点击事件时，触发greet事件，而{name:"慕课网"}则作为参数被传入到greet事件中，{name:"慕课网"}表示一个对象，要想得到“慕课网”，就要通过name属性来查找，所以用event.data.name
这里也可以传入一个{name:"慕课网"，url:"www.imooc.com/qadetail/262220"}这样一个多变量参数，如果要查找地址信息，则用event.data.url
大概就是这样。
查看全部 -
keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
查看全部 -
jQuery自定义事件之triggerHandler事件
trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替
triggerHandler与trigger的用法是一样的，重点看不同之处：
triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined
查看全部 -
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)的使用；
查看全部 -
jQuery事件对象的作用
事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它还是非常有用的
一个标准的"click"点击事件
$(elem).on("click",function(event){ event //事件对象 })在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异。jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象
这里不在千篇一律的说方法的使用，通过实际的一个小案例，从而来了解事件对象的作用
<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()查看全部 -
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 );可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的
click()只对页面已经存在的元素起作用，动态生成的元素需要用到on，比如页面中存在一个button，<button id='btn1' type='button'>btn1</button>，$('#btn1').click(....)是可以成功触发的，但如果动态创建一个新的button比如这样：$('#btn1').after("<button id='btn2' type='button'>btn2</button>")，调用$('#btn2').click时是不起作用的，on('click','#btn2',function())则可以正常触发。
查看全部
举报