HTML_DOM_Event(添加事件处理程序的多种方式、常见事件案例以及事件监听器)

HTML DOM允许您在事件发生时执行代码。

The HTML DOM allows you to execute code when an event occurs.
Events are generated by the browser when “things happen” to HTML elements:

- An element is clicked on
- The page has loaded
- Input fields are changed

对事件做出反应

事件发生时,例如用户单击HTML元素时,可以执行JavaScript。
要在用户单击元素时执行代码,请将JavaScript代码添加到HTML事件属性中:

onclick=JavaScript

HTML事件的示例:

  • 用户单击鼠标时
  • 网页加载后
  • 加载图像后
  • 当鼠标移到元素上时
  • 输入栏变更时
  • 提交HTML表单时
  • 当用户敲击按键时

示例:

<h1 onclick="myFunction()">Fuck you</h1>
<p onclick="changeText(this)">Click on this text!</p>
<!--Script to uses innerHTML -->
<script>
function myFunction(){
	var e=document.getElementsByTagName("h1")[0];

if(e.innerHTML=="Fuck you"){
	e.innerHTML="Love you";
}else if(e.innerHTML=="Love you")
{
	e.innerHTML="Fuck you";
}
}


function changeText(element){
	element.innerHTML="Ooops";
}
</script>
</script>

将JavaScript事件处理代码嵌套在html代码中

<p onclick="this.innerHTML='what the hell'">click me.</p>

使用HTML事件属性添加事件

要将事件分配给HTML元素,可以使用事件属性。
如:将onclick事件分配给按钮元素:
在此示例中,单击按钮时将执行名为displayDate的函数。

<p>Click the button to display the date.</p>
<button onclick="displayDate()" >The time is?</button>

<!--Script to uses innerHTML -->
<script>
//document.getElementsByTagName("button")[0].οnclick=displayDate;
function displayDate(){
	document.getElementsByTagName("button")[0].innerHTML=Date();
}

使用HTMLDOM添加事件

HTML DOM允许您使用JavaScript将事件分配给HTML元素:

例如:将onclick事件分配给按钮元素

<p>Click the button to display the date.</p>
<button >The time is?</button>

<!--Script to uses innerHTML -->
<script>
document.getElementsByTagName("button")[0].onclick=displayDate;
function displayDate(){
	document.getElementsByTagName("button")[0].innerHTML=Date();
}
</script>

常用事件介绍和示例

  • onload and onunload
  • onchange
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup
  • onclick

综合演示案例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body onload="checkCookies()">
<p id="demo"></p>
<hr>
<p onclick="this.innerHTML='what the hell'">click me.</p>
<hr>
<input type="text" onchange="toUpperCase()"></input>
<hr>
<div style="width:200px;height:50px;background-color:red;text-align:center;line-height:50px" onmouseover="mover(this)" onmouseout="mout(this)">
Fuck you
</div>
<hr>
<div style="width:200px;height:50px;background-color:red;text-align:center;line-height:50px" onmousedown="mdown(this)" onmouseup="mup(this)">
Welcome to China
</div>
<hr>
<button onclick="sayHi()">click me to say hi!</button>


<!--Script to uses innerHTML -->
<script>
function toUpperCase(){

var element=document.getElementsByTagName("input")[0];
element.value=element.value.toUpperCase();

}


function mover(element){

element.innerHTML="Love you";

}

function mout(element){

element.innerHTML="Fuck you";

}

function mdown(element){
	element.style.color="yellow";
	element.innerHTML="mousedown";

}

function mup(element){
	
	element.innerHTML="mouseup";

}

function checkCookies(){
	if(navigator.cookieEnabled==true)
	{
		text="Cookies are enabled.";
	}else
	{
		text="Cookies are not enabled.";
	}
	document.getElementById("demo").innerHTML=text;
}

function sayHi(){
alert("hi!");
}

</script>

</body>

</html>

添加事件监听器

The addEventListener() method
example:
Add an event listener that fires when a user clicks a button

<button id="demo">click me</button>
<!--Script to uses innerHTML -->
<script>

document.getElementById("demo").addEventListener("click",displayDate);
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}

</script>

事件监听器的优势

  • 可以添加多个相同类型的事件处理程序
  • 可以将事件处理程序和html代码完全分开
  • 能够删除事件处理程序
  • 能够控制冒泡

事件监听器语法

- 第一个参数是事件类型,如:click
- 第二个参数是事件发生时我们要调用的函数。
- 第三个参数是一个布尔值,指定是使用事件冒泡还是使用事件捕获。 此参数是可选的。

意,在事件监听器中,不要为事件使用“ on”前缀。 使用“click”代替“ onclick”。

使用事件监听器添加事件处理程序

将多个相同类型事件处理程序添加到同一元素

addEventListener()方法允许您将许多事件添加到同一元素,而不会覆盖现有事件:

<button id="demo">click me</button>
<!--Script to uses innerHTML -->
<script>

document.getElementById("demo").addEventListener("click",displayDate);
document.getElementById("demo").addEventListener("click",myFunction);
function displayDate(){

alert("Hello World");
}
function myFunction(){

	alert("fuck you");
}

</script>

您可以将不同类型的事件添加到同一元素:

<button id="myBtn">click me</button>
<p id="demo"></p>
<!--Script to uses innerHTML -->
<script>

document.getElementById("myBtn").addEventListener("mouseover",displayDate);
document.getElementById("myBtn").addEventListener("mouseout",myFunction);
document.getElementById("myBtn").addEventListener("click",clickFunction);
function displayDate(){

document.getElementById("demo").innerHTML+="Moused over!<br>";

}
function myFunction(){

	document.getElementById("demo").innerHTML+="Moused out!<br>";
}

function clickFunction(){
	document.getElementById("demo").innerHTML+="clicked!<br>";
}

</script>

将事件处理程序添加到window对象

添加一个事件侦听器,该侦听器在用户调整窗口大小时触发:

<p id="demo"></p>
<!--javascript-->
<script>
window.addEventListener("resize",function(){document.getElementById("demo").innerHTML=Math.random();});

在事件处理程序中使用带参函数

<p id="demo"></p>
<button id="myBtn">try it</button>
<!--javascript-->
<script>
window.addEventListener("resize",function(){document.getElementById("demo").innerHTML=Math.random();});

var x,y;
x=10;
y=20;
document.getElementById("myBtn").addEventListener("click",function(){myFunction(x,y);});

function myFunction(num1,num2)
{
var result=num1*num2;
document.getElementById("demo").innerHTML=result;
}

</script>

事件监听器的事件冒泡和事件捕获

HTML DOM中有两种事件传播方式:冒泡和捕获

事件传播是定义当事件发生时,元素触发事件的顺序

比如:一个p标签在div标签中,你点击了p标签,那么这时触发的事件是p标签的还是div标签的呢?

在冒泡时
首先处理最里面的元素的事件,然后处理最外面的元素:首先处理p元素的click事件,然后处理div元素的click事件。

在捕获中
首先处理最外部元素的事件,然后处理内部:首先处理div元素的click事件,然后处理p元素的click事件。

使用addEventListener()方法,可以使用“ useCapture”参数指定传播类型:
缺省值为false,它将使用冒泡传播;将值设置为true时,事件将使用捕获传播。

示例:

<html>
<head>
<style>
#myDiv1,#myDiv2{

	background-color:red;
	padding:50px;
	border:1px solid;
	margin:10px;
	
}

#myP1,#myP2{
		background-color:yellow;
		font-size:20px;
		border:1px solid;
		padding:20px;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<h1>Javascript addEventListener()</h1>
<div id="myDiv1">
<h2>冒泡</h2>
<p id="myP1">Click me</p>
</div>
<div id="myDiv2">
<h2>捕获</h2>
<p id="myP2">Click me</p>
</div>
<!--javascript-->
<script>
document.getElementById("myP1").addEventListener("click",function(){alert("You clicked the yellow element")},false);
document.getElementById("myDiv1").addEventListener("click",function(){alert("You clicked the red element")},false);

document.getElementById("myP2").addEventListener("click",function(){alert("You clicked the yellow element")},true);
document.getElementById("myDiv2").addEventListener("click",function(){alert("You clicked the red element")},true);
</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页