目录
CSS操作
HTML 元素的 style 属性
操作 CSS 样式最简单的方法，就是使用网页元素节点的 setAttribute 方 法直接操作网页元素的 style属性
div.setAttribute(
'style',
'background-color:red;' + 'border:1px solid black;'
);元素节点的 style 属性
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';cssText 属性
var divStyle =
document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';事件处理程序
事件处理程序分为：
1 、HTML事件处理
2、 DOM0级事件处理
3 、DOM2级事件处理
4、 IE事件处理
HTML事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js事件详解--事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script>
function demo(){
alert("hello html事件处理");
}
</script>
</body>
</html>DOM0级事件处理
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");}
</script>
</body>DOM2级事件处理
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn1.removeEventListener("click",demo2);
</script>
</body>IE事件处理程序
IE实现了与DOM中类似的两个方法： attachEvent() 和 detachEvent()
事件类型之鼠标事件
常见事件类型
1 鼠标事件
2 键盘事件
3 表单事件
4 窗口事件
5 焦点/剪贴板事件
6 网页状态事件
7 Touch事件
鼠标事件
鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
1 click：按下鼠标时触发
2 dblclick：在同一个元素上双击鼠标时触发
3 mousedown：按下鼠标键时触发
4 mouseup：释放按下的鼠标键时触发
5 mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
6 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
7 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
8 mouseover: Triggered when the mouse enters a node, entering a child node will trigger this event again
9 mouseout: Triggered when the mouse leaves a node, leaving the parent node will also trigger this event
10 wheel: Triggered when the mouse wheel is rolled
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("click事件");
}Kind tips
When using these methods, except for DOM2 level events, you need to add the prefix on
event flow
The event flow describes the order in which events are received from the page, but what is interesting is that Microsoft (IE) and Netscape (Netscape) development teams actually proposed two diametrically opposed event flow concepts. IE's event flow is event bubbling Stream (event bubbling), and Netscape's event stream is event capture stream (event capturing)
event bubbling
The event flow proposed by IE is called event bubbling, that is, the event is received by the most specific element at the beginning, and then propagated up to less specific nodes step by step
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onclick="bodyClick()">
<div onclick="divClick()">
<button onclick="btn()">
<p onclick="p()">点击冒泡</p>
</button>
</div>
<script>
function p(){
console.log('p标签被点击')
}
function btn(){
console.log("button被点击")
}
function divClick(event){
console.log('div被点击');
}
function bodyClick(){
console.log('body被点击')
}
</script>
</body>
</html>event capture
The idea of event capture flow is that less specific DOM nodes should receive events earlier and most specific nodes should receive events last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button>
<p>点击捕获</p>
</button>
</div>
<script>
var oP=document.querySelector('p');
var oB=document.querySelector('button');
var oD=document.querySelector('div');
var oBody=document.querySelector('body');
oP.addEventListener('click',function(){
console.log('p标签被点击')
},true);
oB.addEventListener('click',function(){
console.log("button被点击")
},true);
oD.addEventListener('click', function()
{
console.log('div被点击')
},true);
oBody.addEventListener('click',function(){
console.log('body被点击')
},true);
</script>
</body>
</html>Event event object
After the event occurs, an event object will be generated and passed to the listening function as a parameter.
Event object properties
1 Event.currentTarget
2 Event.Target
3 Event.type
Event.currentTarget
The Event.currentTarget property returns the node where the event is currently located, that is, the node to which the listening function being executed is bound
btn.onclick = function(e){
console.log(e.currentTarget);
}
Event.target
The Event.target property returns the node that originally triggered the event, that is, the node where the event originally occurred. During the event propagation process, the values of the Event.target and Event.currentTarget properties inside the listening function of different nodes are different. The former is always unchanged, and the latter points to the node object where the listening function is located.
// HTML代码为
// <p id="para">Hello <em>World</em></p>
function hide(e) {
console.log(this === e.currentTarget); //总是 true
console.log(this === e.target); // 有可能不是 true
e.target.style.visibility = 'hidden';
}
para.addEventListener('click', hide, false);Event.type
The Event.type property returns a string indicating the event type. The type of event is when the event is generated. This property is read only
Event object method
1、 Event.preventDefault()
2 、Event.stopPropagation()
Event.preventDefault
The Event.preventDefault method cancels the browser's default behavior for the current event. For example, after clicking a link, the browser will jump to another page by default. After using this method, it will not jump
btn.onclick = function(e){
e.preventDefault(); // 阻止默认事件
console.log("点击A标签");
}Event.stopPropagation()
The stopPropagation method prevents the event from continuing to propagate in the DOM, and prevents triggering of listener functions defined on other nodes, but does not include other event listener functions on the current node
btn.onclick = function(e){
e.stopPropagation(); // 阻止事件冒泡
console.log("btn");
}Event type keyboard event
Keyboard events are triggered by the user hitting the keyboard, mainly including keydown, keypress, keyup three events
1. keydown: Triggered when the keyboard is pressed.
2. keypress: Triggered when a key with a value is pressed, that is, a key without a value such as Ctrl, Alt, Shift, and Meta is pressed, and this event will not be triggered. For a key with a value, the keydown event is triggered first when pressed, and then this event is triggered.
3. keyup: This event is triggered when the keyboard is released
username.onkeypress = function(e){
console.log("keypress事件");
}event object
keyCode: unique identifier
var username = document.getElementById("username");
username.onkeydown = function(e){
if(e.keyCode === 13){
console.log("回车");
}
}
Form event of event type
Form events are a series of events that can be listened to when using form elements and input box elements
1 input event
2 select event
3 Change event
4 reset event
5 submit event
input event
The input event is triggered when the value of <input> , <select> , <textarea> changes . For a check box ( <input type=checkbox> ) or a radio button (< input type=radio > ), this event will also be triggered when the user changes the option. A characteristic of the input event is that it will be triggered continuously, for example, every time the user presses The next time a key is pressed, an input event is triggered.
var username = document.getElementById("username");
username.oninput = function(e){
console.log(e.target.value);
}select event
The select event is triggered when text is selected in <input>, <textarea>
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e)
{
console.log(e.type); // "select"
}, false);Change event
Change event is triggered when the value of <input>, <select>, <textarea> changes. The biggest difference between it and the input event is that it will not be triggered continuously, it will only be triggered when all modifications are completed
var email = document.getElementById("email");
email.onchange = function(e){
console.log(e.target.value);
}reset event, submit event
These two events happen on the form object, not on the members of the form. The reset event fires when the form is reset (all form members change back to default values).
The submit event fires when form data is submitted to the server. Note that the object of the submit event is the <form> element, not the <button> element, because the form is submitted, not the button
<form id="myForm" onsubmit="submitHandle">
<button onclick="resetHandle">重置数据</button>
<button>提交</button>
</form>var myForm = document.getElementById("myForm")
function resetHandle(){
myForm.reset();
}
function submitHandle(){
console.log("提交");
}