JS基础——事件操作总结
通用事件绑定
function bindEvent(elem,type,fn) {
elem.addEventListener(type,fn);
}
let a =document.getElementById('a');
bindEvent(a,'click',function(e){
e.preventDefault() //阻止浏览器默认行为,防止调转
alert(‘clicked’);
})
事件冒泡
<body>
<div>
<p id ="p1">激活</p>
<p id ="p2">取消</p>
<p id ="p3">取消</p>
</div>
<div>
<p id ="p4">取消</p>
<p id ="p5">取消</p>
</div>
</body>
let body =document.body
let p1 =document.getElementById('p1');
bindEvent(p1,'click',function(e){
e.stopPropagation(); //阻止事件冒泡
alert('激活')
})
bindEvent(body,'click',function(e){
alert('取消')
})
事件代理
<body>
<div id="div1">
<p id ="p1">激活</p>
<p id ="p2">取消</p>
<p id ="p3">确认</p>
</div>
</body>
let body =document.body
let div1 =document.getElementById('div1');
bindEvent(div1,'click',function(e){
const target =e.target;
if(target.nodeName === 'A') { //判断是否是a标签
alert('target.innerHTML')
}
})
事件绑定函数(完善)
function bindEvent(elem,type,selector,fn) {
if(fn == null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function(e){
if(selector){
const target= e.target
if(target.matches(seletor)){
fn.call(target, e)
}
}else {
fn(e);
}
});
}
JS基础——事件操作总结的更多相关文章
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- js基础——属性操作
html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...
- 2-4 js基础-事件对象小结
var e=ev||event; e.cancelBubble=true; document.documentElement html document.body ...
- js基础——事件绑定（事件监听）
JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...
- JS基础-事件循环机制
从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...
- JS基础-事件
事件机制 事件触发三阶段 事件触发有三个阶段: window 往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往 window 传播,遇到注册的冒泡事件会触发 ...
- JS 基础事件的用法
// 1.9以上用on // 案例一 // $('#btn').on('click', function(){ // //console.log(1); // alert('测试...'); // } ...
- js基础---元素操作时字符串拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- C语言——无向带权图邻接矩阵的建立
#include <stdio.h> #include "Graph.h" #define MAX_INT 32767 /* #define vnum 20 #defi ...
- sql server2008安装时提示重启计算机失败怎么办？
在键盘上按下组合键[Win]+[R],调出运行窗口. 在窗口中输入“regedit”,点击确定,打开注册表管理界面. 在注册表左侧目录栏中找到如下位置:“HKEY_LOCAL_MACHINE\SYST ...
- ORACLE 数据找回
-- 找回一个小时前的数据 select * from sys_system_dictionary as of timestamp sysdate - 1/24order by id AS OF TI ...
- (MUA)mutt-"No authenticators available" 发送不出去邮件
问题: 使用mutt发送邮件的时候,在调试模式下总是显示"No authenticators available", 后来在google上查到可能要设置验证方法gssapi,但是设 ...
- 乘风破浪：LeetCode真题_008_String to Integer (atoi)
乘风破浪:LeetCode真题_008_String to Integer (atoi) 一.前言 将整型转换成字符串,或者将字符串转换成整型,是经常出现的,也是必要的,因此我们需要熟练的掌握,当然也 ...
- 内存池-转载自IBM
[转载自IBM]讲的很好~推荐看看 6.1 自定义内存池性能优化的原理 如前所述,读者已经了解到"堆"和"栈"的区别.而在编程实践中,不可避免地要大量用到堆上的 ...
- day13 多线程建立方法
#01创建多线程 继承Thread类 覆盖run方法:run方法里面运行要执行的代码 创建对象 调用start方法,start方法会开启线程,然后调用run方法 获取线程名字: ...
- Sublime 正则替换
打开替换的窗口 在Find What 写入待匹配的正则表达式,然后在Replace With写上要替换的内容($1代表第一个括号内内容,依次类推) 然后选择对应的选项
- linux服务器nginx的卸载和安装
刚接触的linux服务器上,nginx配置乱的有点令人发指,就把老的卸载了重新装一下. 卸载 linux有一系列的软件管理器,比如常见的linux下的yum.Ubuntu下的apt-get等等.通过这 ...
- Java（Android）编程思想笔记03：在Android开发中使用MVP模式
1. MVP模式简介: MVC模式相信大家肯定是比较熟悉的:M-Model-模型.V-View-视图.C-Controller-控制器. MVP作为MVC的演化版本,那么类似的MVP所对应的意义:M- ...