JavaScript 事件

2016/01/01 JavaScript

JavaScript 事件

绑定事件:

    $("body").delegate("#clickTest", "click", {a:2,c:2}, function(e){
      console.log(e);
    });
    //1.7以后使用 可以绑定新添加的元素,传递参数
    $('body').on("click", "#clickTest", {aa:2}, function(e){
      console.log(e);
    })

事件类型:

click
dbclick
mousedown   event.which (1 是左键, 2是中建,3是右键)
mouseup
mousemove
mouseover  鼠标进入事件
mouseout   鼠标离开事件
mouseenter IE专有 jquery模拟 与mouseover冒泡方式不同 mouseenter只会在绑定它的元素上调用,不会在后代节点上触发
mouseleave
hover $(selector).hover(handlerIn, handlerOut)

focusin 元素或元素内部任何一个元素获得焦点时触发
focusout 元素或元素内部任何一个元素失去焦点时触发

focus 在元素本身产生,focusin在元素包含的元素中产生

input(监听val)/select(监听选择)/textarea(监听鼠标点击) change事件

textarea/input 文本被选择时有select事件,通过event.target.value 获取选择的字符

submit 表单提交事件,触发submit事件的行为:
<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时,敲击Enter(回车键)

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

keydown  每次获取的内容都是之前输入的,当前输入的获取不到
keyup
keypress 无法响应中文输入 无法响应功能键
//多个事件绑定同一个函数
$("#ele").on("mouseover mouseout", function(){})
//多个事件绑定不同的函数
$("#ele").on({
mouseover:funcion(){},
mouseout:function(){}
})
//删除一个事件
$("#ele").off("mouseover");
//删除所有
#("#ele").off()

事件对象event:

event.target 注册事件时的元素或者它的字元素
通常比较 event.target == this 确定事件是不是由于冒泡而触发
event.type 获取事件的类型
event.pageX 获取鼠标当前相对于页面的坐标 以页面为参考点,不随滑动条移动而变化
event.pageY 

event.preventDefault() 阻止默认行为(a标签跳转等)
event.stopPropagation()  阻止事件冒泡
event.which 鼠标左键中键右键等
event.currentTarget 在事件冒泡中的当前dom元素 == this

this  event.target 都是dom对象

tigger 与自定义事件

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

trigger 与 triggerHandler 区别

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

Search

    Table of Contents