JS DOM属性+JS事件
DOM属性
console.log(ele.attributes) 获取ele元素的属性集合
ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值
ele.attributes[attr].nodeValue 获取指定属性值
ele.attributes.removeNamedItem(attr) 删除指定属性
创建属性并赋值：
var attr=document.createAttribute(attr); 创建属性对象
attr.value=value; 给属性赋值
ele.attributes. setNamedItem (attr) 设置属性值
getAttribute()能获取元素的固有属性，也能获取元素的自定义属性
只能获取单个元素节点的属性值，且不属于document对象，属于单个元素节点对象
ele.getAttribute(attr)
ele.setAttribute(attr,value) 设置属性
ele.removeAttribute(attr) 移除属性
布尔值属性-案例：
inputs[i].checked = 1/true/’checked’; 选中
inputs[i].checked = 0/false/null; 没被选中
inputs[i].removeAttribute('checked');
options[i].selected=true;
input[i].readonly=true;
select.multiple=true;
div.hidden=true;
字符串属性：
获取data属性
elem.dataset.toggle 获取data-toggle属性
elem.dataset.xxxYyy 获取data-xxx-yyy属性
获取class属性
elem.className 获取所有class属性
自定义class操作方法：
首先贴出domReady.js，后面常常会用到，这里只贴出一次！！！
function myReady(fn){
//对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
if ( document.addEventListener ) {
document.addEventListener("DOMContentLoaded", fn, false);
} else {
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded (fn) {
var d = window.document;
var done = false;
//只执行一次用户的回调函数init()
var init = function () {
if (!done) {
done = true;
fn();
}
};
(function () {
try {
// DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch (e) {
//延迟再试一次~
setTimeout(arguments.callee, 50);
return;
}
// 没有错误就表示DOM树创建完毕，然后立马执行用户回调
init();
})();
//监听document的加载状态
d.onreadystatechange = function() {
// 如果用户是在domReady之后绑定的函数，就立马执行
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
}
}
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>class attributes</title>
<script src="domReady.js"></script>
<script>
var CC = {
// 获取class，返回数组
getClass: function(ele) {
// 将多个空格正则匹配成一个空格
// 然后将字符串按照空格来分割成数组
return ele.className.replace(/\s+/, " ").split(" ");
}, // 判断是否含有某个class
hasClass: function(ele, cls) {
// 查询某个类名是否出现在所有类名集合中
return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");
}, // 给元素添加某个类
addClass: function(ele, cls) {
// 判断类名是否已经存在
if (!this.hasClass(ele, cls))
ele.className += " " + cls;
}, // 移除某个类
removeClass: function(ele, cls) {
if (this.hasClass(ele, cls)) {
// 正则：开头可以有空格或者没有空格
// 结尾可以有空格或者没有空格
// gi表示查找整个字符串，并且忽略大小写
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi");
// 将匹配到的类名用一个空格来代替
ele.className = ele.className.replace(reg, " ");
}
}, // 某个类：不存在就添加；存在就移除
toggleClass: function(ele, cls) {
if (this.hasClass(ele, cls)) {
this.removeClass(ele, cls);
} else {
this.addClass(ele, cls);
}
}
}; myReady(function() {
var body = document.body;
console.log(CC.getClass(body));
console.log(CC.hasClass(body, 'bbb'));
CC.addClass(body, 'ccc');
CC.removeClass(body, 'aaa');
CC.toggleClass(body, 'bbb');
});
</script>
</head>
<body class="aaa bbb aaa">
TEST
</body>
</html>
elem.classList.add(cls) 添加class
elem.classList.remove(cls) 移除class
elem.classList.contains(cls) 是否存在某个class
elem.classList.toggle(cls) 切换某个class
elem.classList.toString() 字符串形式输出所有class
JS事件
事件监听函数三种方式：
1、直接在html中定义，不建议使用
<button onclick=”function(){alert(‘clicked’);}”>按钮</button>
<body onload=”init()”></body>
2、DOM 0级事件：元素只能绑定一个监听函数
先获取DOM元素，再绑定事件
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("DOM0级事件绑定方式 ");
}
3、DOM 2级事件：可以绑定多个监听函数，还有捕获和冒泡控制
var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
alert("DOM2级事件绑定方式")
}, false);
移除事件：
btn.removeEventListener('click', Dom);
IE事件流：
IE8及以下不支持DOM 2级
没有事件捕获，默认就是冒泡
var btn = document.getElementById("myBtn");
var clickme = function() {alert("Clicked");}
btn.attachEvent("onclick", clickme); /*绑定事件*/
btn.detachEvent("onclick", clickme); /*移除事件*/
//补充：IE中this指向window
btn.attachEvent("onclick",function(){alert(this === window); })
跨浏览器事件处理程序：兼容IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨浏览器事件处理程序</title>
</head>
<body>
<button id="myBtn">点击我</button>
<script type="text/javascript">
var EventUtil = {
//绑定事件
addHandler:function(element,type,handler){
if(element.addEventListener){
//Chrome Firefox IE9等 addEventListener
element.addEventListener(type,handler,false);
}else if (element.attachEvent) {
//IE8及IE8以下的浏览器 attachEvent
element.attachEvent("on"+ type,handler);
} else{
// 这种情况几乎不存在
element["on"+type] = handler
}
},
//移除事件
removeHandler: function(element,type,handler){
if(element.removeEventListener){
//Chrome Firefox IE9等
element.removeEventListener(type,handler,false);
}else if (element.detachEvent) {
//IE8及IE8以下的浏览器
element.detachEvent("on"+type,handler);
} else{
// 这种情况几乎不存在
element["on"+type] = handler
}
}
}
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
}
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
</script>
</body>
</html>
事件委托与事件冒泡
事件周期：
1、 事件捕获：沿着DOM树（直系亲属）向下
2、 事件执行
3、 事件冒泡：沿着DOM树（直系亲属）向上
addEventListener()最后一个参数：false事件冒泡 true事件捕获
事件委托：原理就是事件冒泡
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>事件冒泡和事件捕获</title>
</head> <body> <div id="parent">
<div id="child" class="child">点击儿子</div>
</div>
<ul id="ul">
<li id="one">item1</li>
<li id="two">item2</li>
<li id="thr">item3</li>
<li id="four">item4</li>
<li id="fiv">item5</li>
<li id="six">item6</li>
</ul>
<script type="text/javascript">
//事件委托，利用了冒泡机制
var ul = document.getElementById("ul");
ul.addEventListener("click", function(event) { if(event.target.id == "one") {
alert(1)
} else if(event.target.id == "two") {
alert(2)
} else if(event.target.id == "thr") {
alert(3)
} else if(event.target.id == "four") {
alert(4)
} else if(event.target.id == "fiv") {
alert(5)
} else {
alert(6)
}
}, false);
</script>
</body> </html>
Event对象属性与方法
event.type 事件类型：比如click
event.target 事件目标对象（如果事件绑定在父元素上，点击了子元素，那么目标对象是子元素）
event.currentTarget 事件绑定的对象（如果事件绑定在父元素上，点击了子元素，那么绑定对象是父元素）
event.preventDefault 阻止默认行为
<a href="http://baidu.com" id="a">跳转链接</a>
var a = document.getElementById("a");
a.addEventListener("click",function(event){
event.preventDefault();
alert(11)
});
event.stopPropagation 阻止事件冒泡或者捕获
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.addEventListener("click",function(){
alert("parent")
})
child.addEventListener("click",function(event ){
alert("child");
//阻止冒泡
event.stopPropagation();
})
event.clientY 浏览器顶部底边到鼠标的位置，不计算滚动轴的距离
event.pageY 浏览器顶部底边到鼠标位置，但是它计算滚动轴的距离
event.screenY 屏幕顶部到鼠标位置（比如把浏览器缩小，但仍然计算的是计算机屏幕）
IE中的Event对象及方法
event.type 事件类型
event.returnValue = false; 阻止默认事件
event.cancelBubble = true; 阻止事件冒泡
event.srcElement 触发对象（点击谁就是谁）
Event对象跨浏览器兼容写法：兼容IE
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Event对象跨浏览器兼容写法</title>
</head> <body>
<div id="parent">
<div id="child">点击我</div>
</div>
<a href="http://www.baidu.com" id="a">跳转链接</a>
<script type="text/javascript">
//Event addEventListener chrome firefox IE9 event.target preventDefault stopPropagation
//Event attachEvent IE8系列的 event.srcElement returnValue cancelBubble
var EventUtil = {
//绑定事件
addHandler: function(element, type, handler) {
if(element.addEventListener) {
//Chrome Firefox IE9等 addEventListener
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
//IE8及IE8以下的浏览器 attachEvent
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
//移除事件
removeHandler: function(element, type, handler) {
if(element.removeEventListener) {
//Chrome Firefox IE9等
element.removeEventListener(type, handler, false);
} else if(element.detachEvent) {
//IE8及IE8以下的浏览器
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
},
// 获取被点击的元素
getTarget: function(event) {
return event.target || event.srcElement;
},
// 阻止默认事件
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止冒泡或者捕获
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true;
}
}
} var parent = document.getElementById("parent");
EventUtil.addHandler(parent, "click", function(event) {
alert("parent被触发了")
}) var child = document.getElementById("child");
EventUtil.addHandler(child, "click", function(event) {
alert("child被触发了")
var target = EventUtil.getTarget(event);
console.log(target);
//阻止事件冒泡
EventUtil.stopPropagation(event)
})
var a = document.getElementById("a");
EventUtil.addHandler(a, "click", function(event) {
EventUtil.preventDefault(event);
})
</script>
</body> </html>
JS事件类型：
【UI事件类型】
1、load事件
当页面完全加载后在window上面触发
EventUtil.addHandler(window, "load", function(e) {
alert("Loaded!");
});
图片预加载(将图片缓存到内存中
var image = new Image();
EventUtil.addHandler(image, "load", function(event){
alert("Image loaded!");
});
image.src = "smile.png";
js动态加载完毕
var script = document.createElement("script");
EventUtil.addHandler(script, "load", function(event){
alert("js Loaded");
});
script.src = "jquery.js";
document.body.appendChild(script);
css动态加载完毕
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css Loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
2、unload事件 用户从一个页面切换到另一个页面
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
3、resize事件
EventUtil.addHandler(window, "resize", function(event){
alert("Resized");
});
4、 scroll事件. 主要针对新旧浏览器
EventUtil.addHandler(window, "scroll", function(event){
alert(111)
});
【焦点事件类型】
1、 blur 失去焦点
2、 focus 不支持冒泡，获取焦点
3、 focusin 同focus一样，支持冒泡
4、 focuout 同blur一样
【鼠标事件】
1、 click 点击
2、 dblclick 双击
3、 mousedown 鼠标按下
4、 mouseup 鼠标松开
mousedown+mouseup=click
5、 mousemove 鼠标移动
6、 mouseout 离开目标元素或子元素
7、 mouseover 进入目标元素或子元素
8、 mouseenter 进入目标元素
9、 mouseleave 离开目标元素
鼠标单击+键盘按键
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event) {
var keys = new Array();
if(event.shiftKey) {
keys.push("shift");
}
if(event.ctrlKey) {
keys.push("ctrl");
}
if(event.altKey) {
keys.push("alt");
}
if(event.metaKey) {
keys.push("meta");
}
console.log("keys:" + keys.join(","));
});
mousedown鼠标点击细分：
event.button == 0 鼠标左键
event.button == 1 鼠标中键
event.button == 2 鼠标右键
IE8派系
event.button == 0 没有按下按钮
event.button == 1 按下主鼠标按钮
event.button == 2 按下次鼠标按钮
event.button == 3 按下同时按下主、次鼠标按钮
event.button == 4 按下中间鼠标按钮
EventUtil.addHandler(myBtn, "mousedown", function(event) {
console.log("mousedown");
console.log(event.button)
})
【键盘事件】
event.keyCode 键码
event.charCode ASCII码（适用于keypress）
1、 keydown 任意键触发
2、 keyup 释放某键
3、 keypress 字符键触发
4、 textInput 键盘输入（event.data获取）
【DOM改变相关】
1、 DOMNodeRemoved document中任意元素被删除
2、 DOMNodeInserted document中任意元素被添加
3、 DOMSubtreeModified document结构中发生任何变化
4、 DOMNodeRemovedFromDocument 从文档中移除之前
5、 DOMNodeInsertedIntoDocument 从文档中添加之前
重点：
1、 DOMContentLoaded
与load区别：在DOM树结构完成之后就会触发，不理会图像。javascript文件、css文件或其他资源是否已经下载，所以比load快
2、 readstatechange （不太好用）
支持IE、firfox、opera，提供文档或者元素加载过程，但是很难预料与load事件一起使用时候
（1）document.readState == uninitialized 尚未初始化
（2）loading 对象正在加载数据
（3）interactive 可以操作对象，但还没有完全加载
（4）对象已经加载完毕
3、hashchange #后面的值变化，只能给window添加
EventUtil.addHandler(window, "hashchange", function(event) {
console.log(event.oldURL + ":"+event.newURL);
})
【移动端常用】
1、 touchstart
EventUtil.addHandler(mybtn, "touchstart", function(event) {
console.log("当前触摸屏幕的触摸点数组："+event.touches)
console.log("数组中只包含引起事件的触摸点信息："+event.changedTouches)
console.log("只包含放在元素上的触摸信息："+event.targetTouches)
});
2、 touchmove 手指在屏幕上滑动
3、 touchend 手指在屏幕上移开
4、 touchcancel 当系统停止跟踪触摸的时候触发
JS DOM属性+JS事件的更多相关文章
- js dom添加回车事件
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta ...
- DOM属性和事件
1-22 DOM属性设置与获取 1.获取属性: getAttribute("attribute"): var p = document.getElementById(" ...
- JS DOM属性，包括固有属性和自定义属性，以及属性获取、移除和设置
属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取,自定义属性不行 <!DOCTYPE html> <ht ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
随机推荐
- ELK同步kafka带有key的Message
需求 kafka中的message带有key,带有相同key值的message后入kafka的意味着更新message,message值为null则意味着删除message. 用logstash来同步 ...
- [sphinx]生成文档的工具
安装: pip install sphinx 新建文档项目 sphinx-quickstart 配置一些设置选项, 生成项目文件 生成html make html .\make.bat html #w ...
- Codeforces_832
A.判断n/k的奇偶性. #include<bits/stdc++.h> using namespace std; long long n,k; int main() { ios::syn ...
- Mongodb 3.2.8: 集群环境搭建
简介 MongoDB是一种面向文档的数据库管理系统,由C++撰写而成,以此来解决应用程序开发社区中的大量现实问题.2007年10月,MongoDB由10gen团队所发展.2009年2月首度推出. ## ...
- [REDIS 读书笔记]第一部分 数据结构与对象 跳跃表
下面是跳跃表的基本原理,REDIS的实现大致相同 跳跃表的一个特点是,插入NODE是通过随机的方式来决定level的,比较奇特 下面是skipList的一个介绍,转载来的,源地址:http://ken ...
- python OpenCV安装
linux系统 yum install -y libSM.x86_64 libXext.x86_64 libXrender.x86_64 pip install numpy Matplotlib pi ...
- bash通配符 shell正则表达式
在linux中 通配符是系统命令使用,一般用来匹配文件名或者什么的用在系统命令中. 通配符是系统级别的,通配符多用在文件名上,比如查找find,ls,cp,rm 正则表达式是操作字符串,以行尾单位来匹 ...
- 解释为什么wait()和notify(), notifyAll()要放在同步块中
首先,wait()是释放锁的,因此wait()之前要先获得锁,而锁在同步块开始的时候获得,结束时释放,即同步块内为持有锁的阶段. 那为什么要设计同步块呢?或者说没有同步块会怎样呢?
- .net core 3 web api jwt 一直 401
最近在给客户开发 Azure DevOps Exension, 该扩展中某个功能需要调用使用 .NET Core 3 写的 Web Api. 在拜读了 Authenticating requests ...
- Linux btrfs文件系统
btrfs,它名字挺多:B-tree fs;Butter fs;Better fs 开源协议是GPL,2007年由Oracle研发 核心特性: 多物理卷支持,btrfs可由多个物理卷组成:支持RAID ...