事件处理
- 方法
-
jQ().事件类型(callback): 当指定标签中注册事件被触发时, 会执行回调函数中的代码 jQ().on(事件类型, [obj],callback)
-
- 事件回调函数中的缺省参数-事件对象
- 我们可以根据事件对象来获取更详细的信息
-
type: 事件的类型 -
target: 事件作用的对象 -
data: 传递对象参数给回调函数的event.data //on事件中的obj对象
- 给标签添加多个事件(可以是相同类型的), 不会覆盖
事件委托
jQ对象.on(type, selector, callback)- 参数
- type: 事件类型
- selector: 给谁注册事件(选择器)
- callback: 事件发生后的回调函数
- 优点
- 给尚不存在的标签(在注册事件的时候,标签还没有生成)添加事件类型
- 可以提高性能
事件冒泡
- 定义: 子标签和父标签身上如果注册了相同类型的事件,那么子标签的事件被触发的时候,父标签的事件也会被触发,而且它是层层向上触发的
- 阻止事件冒泡方法
- 对应标签返回false:
return false - 使用事件对象的方法:
e.stopPropagation();
- 对应标签返回false:
- 注意: 阻止冒泡是只会阻止当层向上冒泡
- on(onclick)执行事件特点: 如果多次执行,会覆盖掉之前的执行,只保留最后一次
-
element.addEventListener(event, function, true): 所有的事件都会被触发,遵循的是冒泡规律(第三个参数改为false就是先捕获父亲事件)
-
标签的默认行为
- form(默认提交表单)等标签有一些默认行为, a标签默认行为在点击后会跳转到链接的地址, 如果类似的标签, 再给他们注册点击事件等, 那么会触发多个动作
- 阻止标签的默认行为
事件对象.preventDefault
自动触发事件方法(点击事件)
-
jQ().trigger(type)- 作用于对象(
事件对象.target): jQ实例对象中所有的标签 - 不会阻止事件冒泡
- 作用于a标签, 阻止标签的默认(跳转)行为
- 作用于表单, 不会阻止表单的默认(提交)行为
- 作用于对象(
-
jQ().triggerHandler(type)- 作用于对象: jQ实例对象中第一个标签
- 默认会阻止事件冒泡
- 会阻止标签的默认事件(form等部分标签)
- 作用于a标签, 阻止标签的默认(跳转)行为
- 作用于表单, 会阻止表单的默认(提交)行为
自定义事件/取消事件
- 自定义事件: 可以给标签添加任意事件类型
-
自动触发
$('button').on('xx',function(){ console.log(11); }) $('button').triggle('xx');
-
- 取消事件:
jQ().off(type,[fn])- 参数
- type: 事件类型
- fn: 可选. 过滤特定事件(对象身上可能添加了多个事件, 取消选中的特定事件)
- 参数
DOM操作常见方法
remove();删除操作 - 把选定标签删除掉(包括该标签)empty();清空操作 - 把选定标签的内容删除(子标签及其文本)-
clone()克隆操作 - 把已有的内容复制一份- 默认情况下, 克隆标签时, 不会克隆事件
- 若想克隆事件, 传入一个参数true
replaceWith()替换 - 用新内容替换当前的标签(传值: 标签/jQ对象)after() | insertAfter被选元素后插入指定的内容 | 插入内容到标签后面before() | insertBefore被选元素前插入指定的内容 | 插入内容到标签前面-
append() | appendTo()插入到标签内容的后面 | 把内容插入到标签内容的后面<p>paragraph.</p> //6. 被选元素(p标签)前插入指定的内容 | 把内容插入到p标签前面 $("p").before("<p>Hello world!</p>"); $("<span>你好！</span>").insertBefore("p"); //7. 在P标签内容后插入内容 | 把内容插入到p标签内容的后面 - 都显示paragraph.Hello World! $("p").append(" <b>Hello world!</b>"); $("<b> Hello World!</b>").appendTo("p"); prepend() | prependTo()插入到标签内容的前面 | 把内容插入到标签内容的前面
