Javascript 事件分析

最新推荐文章于 2024-01-01 14:44:19 发布

原创最新推荐文章于 2024-01-01 14:44:19 发布 · 734 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTML中的事件处理方式，包括事件源、各种类型的事件及其触发条件，并提供了多种添加事件处理程序的方法示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件处理

   一、事件源: 任何一个HTML元素（节点） body, div , button p, a, h1 .......

   二、事件: 你的操作
       鼠标:
           click     单击
           dblclick 双击
           contextmenu (在body) 文本菜单

           mouseover 放上
           mouseout 离开
           mousedown 按下
           mouseup   抬起
           mousemove 移动
       键盘：
           keypress 键盘事件
           keyup     抬起
           keydown   按下

       文档：
           load   加载
           unload 关闭
           beforeunload 关闭之前

       表单：
           focus 焦点
           blur 失去焦点
           submit 提交事件
           change 改变
       其它：
           scroll 滚动事件
           selectd 事件

           。。。。

   三、事件处理程序

有三种方法加事件

   第一种：
       格式： <tag on事件="事件处理程序" />

   第二种：

       <script>
           对象.on事件=事件处理程序
       </script>

   第三种：

<body oncontextmenu = "alert('adfasd');return false"> <!--  1:事件return false 才能阻止时间继续发生
	譬如 这个 oncontextmenu 是对页面右键的时候 触发的  如果此时只有alert('aa') 那么 弹出aa之后 右键的菜单依然出现
	 但是 如果有return  false 的话 就阻止了时间继续发生 意味着右键菜单不会出现

	 <body oncontextmenu = "showMenu()"> 此时右键菜单依然会出现  为什么？ 因为showMenu()返回false 相当于
	 oncontextmenu = "false"  而并不是  oncontextmenu 事件  返回假

	 SO 要成功不出现菜单的话 就要oncontextmenu return false

	  <body oncontextmenu = "return showMenu()">  才可以
  -->


  <script>
  	function showMenu(){
  		alert('aaaa');
  		return false
  	}

  </script>



<div id="one">

	<p id ="p">aaaaaaaaaaaa</p>

</div>


<div id="two" style="width:500px;height:300px;background:#ccc" onclick="showBg(this,'red')" onmouseover="showBg(this,'yellow')">

	dsafasdf

</div>


<script>
	var  one =document.getElementById("one")
	var  pobj =document.getElementById("p")
	var  two = document.getElementById("two")
	function show(){

		alert(one.textContent)
	}

	one.onclick = function (){        		// 分离HTML 的事件写法
		this.style.backgroundColor="red"
	}

	pobj.onmouseover = function (){
		this.style.fontSize="20px"
	}

	function showBg(obj,color){
		obj.style.backgroundColor=color   //结合HTML 的写法 onclick="showBg(this,'red')"

	}

	two.ondblclick = function (){   	//既要分离 又要利用函数的话 就要甘写
		showBg(this,'blue')			//其实这样写 相当于 DOM 对象的操作 对象的属性操作 obj.href obj.title  ...
	}								//这是固定格式 不能够 two.ondblclick=showBg()



</script>

<input type="button" onclick ="show()" value="show">