07-jQuery中的事件

    xiaoxiao2021-03-25  38

    第七节:JQuery中的事件

    1、事件对象的属性

    event.type:获取事件的类型 event.target:获取到触发事件的元素 event.preventDefault方法 阻止默认事件行为 event.stopPropagation()阻止事件的冒泡 keyCode:只针对于keypress事件,获取键盘键数字 按下回车,13 event.pageX / event.pageY 获取到光标相对于页面的x坐标和y坐标 如果没有jQuery,在IE浏览器中用event.x / event.y;在Firefox浏览器中用event.pageX / event.pageY。 如果页面上有滚动条还要加上滚动条的宽度和高度 event.clientX:光标对于浏览器窗口的水平坐标 浏览器 event.clientY:光标对于浏览器窗口的垂直坐标 event.screenX:光标对于电脑屏幕的水平坐标 电脑屏幕 event.screenY:光标对于电脑屏幕的水平坐标 event.which 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键, 在键盘事件中的按键 1代表左键 2代表中键 3代表右键

    2、事件冒泡

    什么是冒泡? 在页面上可以有多个事件,也可以多个元素影响同一个元素 从里到外 嵌套关系 相同事件 其中的某一父类没有相同事件时,继续向上查找

    停止事件冒泡 停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行 在jQuery中提供了stopPropagation()方法

    阻止默认行为 网页中元素有自己的默认行为,例如:单击超链接后会跳转、单击提交后表单会提交,有时需要阻止元素的默认行为 在jQuery中提供了preventDefault()方法来阻止元素的默认行为

    事件捕获 事件捕获和冒泡是相反的过程,事件捕获是从最顶端往下开始触发 并非所有的浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript来修复。 jQuery不支持事件捕获,如需要用事件捕获,要用原生的JavaScriptbind();

    绑定 为匹配元素绑定处理方法 需要给一个元素添加多个事件 ,事件执行一样时候 one():只执行一次

    页面载入 ready(fn) 当DOM载入就绪可以绑定一个要执行的函数 事件绑定 blind(type,[data],fn) 为每个匹配元素的特定事件绑定一个事件处理函数 事件绑定 unblind() 解除绑定 事件绑定 on(events,[,selector[,]data],handler) 在选择元素上绑定一个或者多个事件处理函数 事件绑定 off() 移除on绑定的事件 事件绑定 delegate(selector,eventType,handler) 为所有选择匹配元素附加一个或多个事件处理函数 事件绑定 undelegate() 移除绑定 事件动态 live(type,fn) 对动态生成的元素进行事件绑定 事件动态 die(type,fn) 移除live()绑定的事件 交互事件 hover() 鼠标移入移出 交互事件 toggle(fn1,fn2,[fn3],[fn4]) 每单击后依次调用函数 交互事件 blur(fn) 触发每一个匹配元素的blur事件 交互事件 change() 触发每一个匹配元素的change事件 交互事件 click() 触发每一个匹配元素的click事件 交互事件 focus() 触发每一个匹配元素的focus事件 交互事件 submit() 触发每一个匹配元素的submit事件 键盘事件 keydown() 触发每一个匹配元素的keydown事件 键盘事件 keypress() 触发每一个匹配元素的keypress事件 键盘事件 keyup() 触发每一个匹配元素的keyup事件 鼠标事件 mousedown(fn) 绑定一个处理函数 鼠标事件 mouseenter(fn) 绑定一个处理函数 键盘事件 mouseleave(fn) 绑定一个处理函数 键盘事件 mouseout(fn) 绑定一个处理函数 键盘事件 mouseover(fn) 绑定一个处理函数 窗口操作 resize(fn) 绑定一个处理函数 窗口操作 scroll(fn) 绑定一个处理函数

    转载请注明原文地址: https://ju.6miu.com/read-26039.html

    最新回复(0)