style样式操作
案例：
<!-- 获取style样式和设置style样式 -->
<div style="height: 100px;width: 100px;background-color:blue;"></div>
<script>
// 获取style样式和设置style样式
var div=document.querySelector("div");
console.log(div.style.backgroundColor);
</script>
获取style样式
案例：
<body>
<ul>
<li class="c">无序列表1</li>
<li class="b">无序列表2</li>
<li class="c b">无序列表3</li>
<li class="b">无序列表4</li>
<li class="c">无序列表5</li>
</ul>
<script>
// class属性的操作
var list=document.querySelectorAll("li");
for(var i=0; i<list.length;i++){
console.log(list[i].className);
}
list[4].className="b";
</script>
</body>
设置style样式
案例：
<div style="height: 100px;width: 100px;background-color:blue;"></div>
<script>
var div=document.querySelector("div");
console.log(div.style.backgroundColor);
div.style.backgroundColor = "brown";
</script>
事件
响应用户操作、完成交互效果。
一般可以分为鼠标事件、键盘事件及其他事件。
| 鼠标事件 | 意义 |
| onmousedown | 按下鼠标键 |
| onmousemove | 移动鼠标 |
| onmouseout | 鼠标离开某一个网页对象 |
| onmouseover | 鼠标移动到某一个网页对象上 |
| onmouseup | 松开鼠标键 |
| onclick | 单击鼠标键 |
| ondblclick | 双击鼠标键 |
| 键盘事件 | 意义 |
| onkeydown | 按下一个键 |
| onkeyup | 松开一个键 |
| onkeypress | 按下然后松开一个键 |
事件的使用
案例：
<button οnclick="alert('请选择');">按钮1</button>
<button οnclick="btnclick()">按钮2</button>
<button class="btn">按钮3</button>
<script>
function btnclick(){
if(confirm("只能确定或取消")){
alert("确定")
}else{
alert("取消")
}
}
document.querySelector(".btn").οnclick=function(){
alert("hello world!");
}
</script>
事件的三个阶段
1.事件捕获阶段:从外向内。
2.事件目标阶段:最开始选择的那个。
3.事件冒泡阶段:从里向外。
事件对象.eventPhase属性可以查看事件触发时所处的阶段。
监听器
将事件处理程序附加到元素,而不覆盖现有的事件处理程序。
DOM监听
案例：
<button>请点击</button>
<script>
var button = document.querySelector("button");
button.οnclick=click;
button.οnclick=click1;
button.addEventListener("click",click1);
button.removeEventListener("click",click1);
function click(){
console.loh("click");
}
function click1(){
console.log("click1");
}
</script>
IE监听
案例：
<button>请点击</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.οnclick=click;
btn.attachEvent("onclick",click1);
btn.datechEvent("onclick",click1);
function click(){
console.log("click");
}
function click1(){
console.log("click1");
}
</script>
兼容性
案例：
<button>请点击</button>
<script>
var btn=document.querySelector("button");
addEventListener("click", btn, function(){
console.log("click");
});
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element['on'+type]=fn;
}
}
function removeEventListener(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn);
}else if(element.detachEvent){
element.detachEvent('on'+type,fn);
}else{
element['on'+type]=null;
}
}
</script>
扫一扫
1903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
