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)行间式: ...
随机推荐
- 使用IDEA详解Spring中依赖注入的类型(上)
使用IDEA详解Spring中依赖注入的类型(上) 在Spring中实现IoC容器的方法是依赖注入,依赖注入的作用是在使用Spring框架创建对象时动态地将其所依赖的对象(例如属性值)注入Bean组件 ...
- 基于LNMP架构部署NextCloud私有云盘
一.NextCloud 概述 云盘这个词无论是做技术出身的朋友还是普通的网民.想必已经听的非常多了.在日常生活当中我们用的最多的云盘莫过于百度网盘了 在前几年百花齐放的网盘市场.到现如今只剩下了百度网 ...
- new 的实现原理
自己封装一个new <script> // 创建一个构造函数 function Father() { this.name = '小红'; this.eat = function () { ...
- 解释为什么不能依赖fail-fast
我的观点fail-fast是什么就不多解释了,应该注意到的是(以ArrayList为例):modCount位于AbstractList中, protected transient int modCou ...
- 使用Unicode(宽字节字符集)；多字节字符集中定义宽字节变量
2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...
- 一文彻底搞懂 TCP三次握手、四次挥手过程及原理
原创文章出自公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! TCP 协议简述 TCP 提供面向有连接的通信传输,面向有连接是指在传送数据之前必须先建立连接,数据传送完成后要释放连接. 无论哪 ...
- PYTHON 学习笔记4 模块的使用、基本IO 写入读取、JSON序列化
前言 若在之前写代码的方式中,从Python 解释器进入.退出后再次进入,其定义的变量.函数等都会丢失.为了解决这个为,我们需要将需要的函数.以及定义的变量等都写入一个文件当中.这个文件就叫做脚本 随 ...
- apache/tomcat安装过程略
apache/tomcat安装过程略 一些变量 apache安装目录 APACHE_PREFIX=/Data/app/apache apache配置文件 APACHE_CONF=/etc/httpd/ ...
- Jenkins新建节点找不到通过Java web启动代理？
参考博客:Jenkins新建节点,启动方式没有“通过Java Web启动代理”选项怎么办? 在Jenkins中,打开“系统管理”→“管理节点”→“新建节点”页面时,“启动方式”选项没有“通过Java ...
- PMP--2.1 商业论证（经济可行性研究报告）
####################################################### PS:半个月没有更新文档,因为是有点单线程,在整理启动过程组和规划过程组的内容,在规划规 ...