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> ...
随机推荐
- 浏览器根对象window之值为数值的属性
1. number属性 1.1 length length 属性返回在当前窗口中frames的数量(包括IFRAMES). 该属性值与window.frames.length属性值相等. 1.2 in ...
- 改bug后 fix bug 时，一个不错的修复描述模板
*问题原因:* 问题出现的原因.*解决方法:* 问题的解决方案.*影响分支:* 影响哪些分支. *相关修改:* 具体的修改文件列表.*自测结果:* 自行测试了哪些用例,将大概步骤描述出来. *影响功能 ...
- 自定义动画（仿Win10加载动画）
一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...
- Qt获取控件位置，坐标总结
总结的结果是: QMouseEvent中两类坐标系统,一类是窗口坐标,一类是显示器坐标. 总结一:经过试验,QMouseEvent::globalPos() 和 QCursor::pos()效果 ...
- PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法
// 前台代码 $.ajax({ url: 'http://www.ushark.net/home/save_trial_apply', dataType: 'jsonp', processData: ...
- Linux修改Oracle用戶
Linux下SSH登陆后: su - Oracle; sqlplus /nolog; conn system/密码; 或者 connect/as sysdba; alter user 用户名 iden ...
- .net core系列之《在.net core中使用MemoryCache实现本地缓存》
说到内存缓存MemoryCache不由的让我想起.Net Framework中的MemoryCache,它位于 System.Runtime.Caching 程序集中. 接下来我们来看看.net co ...
- 变换CALayer锚点实现模拟时钟的动画
变换CALayer锚点实现模拟时钟的动画 变换锚点得需要一点理论知识,看下图就能明白:). https://developer.apple.com/library/ios/documentation/ ...
- Http扫盲
https://www.kancloud.cn/kancloud/tealeaf-http/43832
- 套接字和标准I/O缓冲区
设置标准I/O函数缓冲区的主要目的是为了提高性能.但套接字中的缓冲主要是为了实现TCP协议而设立的.例如,TCP传输中丢失数据时将再次传递,而再次发送数据则意味着在某地保存了数据.存在什么地方呢?套接 ...