alert方法 jQuery js alert方法

转载

mob6454cc74c0fc 2023-06-25 21:32:12

文章标签 alert方法 jQuery js javascript 绑定事件句柄 文章分类 jQuery 前端开发

一、有几种常用的：

在JavaScript中，有三种常用的绑定事件的方法：

1、在DOM元素中直接绑定。
2、在JavaScript代码中绑定。
3、绑定事件监听函数。

二、具体分析：

1、在DOM元素中直接绑定：onclick

①原生函数：

<input οnclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />

②自定义函数：

<input οnclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>

2、在Javascript代码中绑定：有三种方法获取元素(获取节点、获取元素、获取标签)

①例如，为 id=“demo” 的按钮绑定一个事件，显示它的 type 属性：

<input id="demo" type="button" value="点击我，显示 type 属性" />

<script type="text/javascript">
document.getElementById("demo").οnclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>

好处：在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，
文档结构清晰，便于管理和开发。

3、绑定事件监听函数：

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

function addEvent(obj,type,handle){
			try{ 		// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
				obj.addEventListener(type,handle,false);
			  }catch(e){
			   try{ 	// IE8.0及其以下版本
			   obj.attachEvent('on' + type,handle);
			}catch(e){  // 早期浏览器
			   obj['on' + type] = handle;
}
}
}

这里使用 try{ … } catch(e){ … } 代替 if … else… 语句，避免浏览器出现错误提示。

addEventListener() 语法知识的补充：

①addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等
handle	事件句柄函数，即用来处理事件的函数
useCapture	Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解

②attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM对象（即DOM元素）
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等
handle	事件句柄函数，即用来处理事件的函数