以点击为例了解JavaScript中HTML DOM事件

最新推荐文章于 2022-12-10 20:18:12 发布
最新推荐文章于 2022-12-10 20:18:12 发布
阅读量785 收藏 30
点赞数 43
分类专栏： 菜鸟学习JS 文章标签： javascript safari webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70117514/article/details/124761866
版权
本文以点击事件为例，深入讲解JavaScript中HTML DOM事件的处理，包括事件属性的使用、事件三要素（事件源、事件、事件处理程序）的概念，并通过示例代码展示如何分配和响应事件。同时提醒读者注意事件分配的正确位置，以避免事件不响应的问题。
摘要由CSDN通过智能技术生成

 文章目录

 

目录

 文章目录

前言

事件

点击示例如下：

用调用函数的方法处理

HTML事件属性

示例

使用 HTML DOM 来分配事件

事件三要素

示例如下

示例2

HTML 事件的其他例子

 

前言

大家好，我是遇见ice。

个人主页：遇见ice的博客

本文主要是以点击事件为例，讲了一些关于事件的知识，其他事件例子下次再讲啦。

走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯

 

事件

事件是用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情。当事件发生时执行代码JavaScript，对事件做出反应。

比如用户在HTML元素上点击，这一事件可写做οnclick=JavaScript的格式。

点击示例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件点击</title>

</head>

<body>

<!--onclick中的内容也可以换成document.getElementsByTagName('h1')[0].innerHTML='点击后的文本'-->

<!--点击文本，可使事件响应，执行''内JavaScript代码-->

<h1 onclick="this.innerHTML='点击后的文本'">请点击文本!</h1>

<!--点击按钮，可使事件响应，执行''内JavaScript代码，颜色不要选红色什么太亮的颜色，对眼睛很不好-->

<input type="button" onclick="document.body.style.backgroundColor='skyblue';" value="修改背景颜色">

</body>

</html>
 

用调用函数的方法处理

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  遇见ice
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    43
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    30
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  59
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html的DOM中Event对象onblur事件用法实例

				
			

			

				

					12-10
				

			

		

		

			
				
在HTML的DOM（Document Object Model）中，Event对象是一个核心组成部分，它定义了与事件相关的属性、方法和事件处理...总的来说，`onblur`事件是HTML DOM中的一个强大工具，可以帮助提高用户体验并增强页面交互性。

			
		

	



                

              
                



	

		

			

				
					
Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox

				
			

			

				

					10-29
				

			

		

		

			
				
Javascript 模拟点击事件,一般情况下ie支持的，firefox并不支持。所以可以通过下面的方法解决。

			
		

	



                


  
              

                


	

		

			

				
					
HTML表单的相关事件及特效

				
			

			

				

					技术改变命运,创新驱动中国
				

				

					03-05
					
					1432
					
				

			

		

		

			
				
HTML表单的相关事件及特效

			
		

	





	

		

			

				
					
【JavaScript】HTML DOM事件------onclick

				
			

			

				

					陶洲川的博客
				

				

					09-09
					
					1457
					
				

			

		

		

			
				
HTML DOM使得JavaScript有能力对HTML事件作出反应； 
一、HTML事件有以下几类： 
1.网页元素加载完毕；
网页加载完毕；
图像加载完毕；
2.鼠标移动到某个区域上； 
3.鼠标点击某个区域或元素； 
4.改变；
输入字段被改变；
提交HTML表单；
5.用户触发某个按键；二、第一个例子<!DOCTYPE html>
<html>
<head>
<meta charset="u

			
		

	



		

			
		



	

		

			

				
					
弹框里innerHtml加入的html绑定点击事件

					
最新发布

				
			

			

				

					notagoodwriter的博客
				

				

					12-10
					
					1534
					
				

			

		

		

			
				
弹框里innerHtml加入的html绑定点击事件

			
		

	





	

		

			

				
					
html标签中添加点击事件的写法

				
			

			

				

					Misnice的博客
				

				

					10-12
					
					7264
					
				

			

		

		

			
				
fn是函数名，2是实参
<div id="node" onclick="fn(2)"></div>




			
		

	





	

		

			

				
					
了解JavaScript中的DOM操作和事件处理

				
			

			

				

					
				

			

		

		

			
				
 介绍JavaScript中的DOM（文档对象模型）  ## 1.1 什么是DOM  DOM（文档对象模型）是指将HTML或XML文档表示为一个树形结构的API。它将文档中的每个元素、属性、文本等都视为一个节点，并且定义了操作这些节点的方法...

			
		

	





	

		

			

				
					
DOM 事件流详解

				
			

			

				

					09-03
				

			

		

		

			
				
事件流是指当在DOM中发生一个事件时，浏览器是如何处理这个事件的。在处理过程中，事件会从一个元素流向另一个元素，直到整个页面的所有元素都遍历完成。DOM事件流主要包括冒泡型事件和捕获型事件两种。  冒泡型事件...

			
		

	





	

		

			

				
					
javascript使用Dom改变超链接前面文本框的值

				
			

			

				

					10-30
				

			

		

		

			
				
在本例中，我们将聚焦于如何通过DOM操作来改变特定输入框的值。示例代码展示了一个包含多个`<input>`标签的HTML表格：  ```html       <input id="hehe" type="text" value="1">+      ...

			
		

	





	

		

			

				
					
JavaScript操作HTML常用方法记录

				
			

			

				

					.NET 方向项目经验分享
				

				

					06-26
					
					471
					
				

			

		

		

			
				
JavaScript操作HTML常用方法收集

			
		

	





	

		

			

				
					
js点击事件触发不了，innerHTML也出错

				
			

			

				

					何子的博客
				

				

					02-10
					
					2164
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
JavaScript 点击事件的 helloword

				
			

			

				

					
				

				

					07-15
					
					147
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			background-col...

			
		

	





	

		

			

				
					
html和js混合写 包括点击事件

				
			

			

				

					hexiaoniao的博客
				

				

					04-22
					
					979
					
				

			

		

		

			
				
html插入js 混合。单双引号。我整个人疯掉了

记录一下

 var html='<div class="item" data-src="'+thumb_big+'" data-sub-html="<span onclick=\'test('+row['id']+')\'>点赞</span>">< img src="'+thumb_img+'" on...

			
		

	





	

		

			

				
					
JS中innerHTML动态绑定的事件丢失

				
			

			

				

					DreamFJ的博客
				

				

					05-15
					
					507
					
				

			

		

		

			
				
转自：https://blog.csdn.net/qq_41818857/article/details/103752612


			
		

	





	

		

			

				
					
html语言添加点击事件,在JavaScript中如何添加点击事件？

				
			

			

				

					weixin_39877166的博客
				

				

					05-30
					
					1504
					
				

			

		

		

			
				
事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头，比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。JavaScript中添加点击事件的方法：一：HTML中添加onclick哈哈二：JS中定义函数绑定事件var funcc = fun...

			
		

	





	

		

			

				
					
js追加html 有点击事件,js点击事件的多种写法

				
			

			

				

					weixin_39531183的博客
				

				

					05-31
					
					835
					
				

			

		

		

			
				
javascript 中的点击事件，可以通过多种不同的添加方式来实现。下面介绍三种 javascript 中添加点击事件的示例代码，个人可以根据自己的项目需要选择不同的实现方式。js添加点击事件的代码我是按钮varbtn=document.getElementById('mochu');btn.onclick=function(){alert('飞鸟慕鱼博客');};addEventLi...

			
		

	





	

		

			

				
					
html js中点击事件的三种方法

				
			

			

				

					weixin_45804159的博客
				

				

					01-07
					
					9862
					
				

			

		

		

			
				
<body>
	<button id="bth" onclick="bth()">点击</button>
	<script type="text/javascript">
		var bth = document.getElementById("btn");
		
		// 第一种  通过方法响应点击事件
		function bth() {
			alert("点击事件");
		}
		
		//第二种 通过点击事件
		bth.onclick = fun

			
		

	





	

		

			

				
					
2021-08-03

				
			

			

				

					weixin_45736311的博客
				

				

					11-18
					
					98
					
				

			

		

		

			
				
JS
1.显示日期：

<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
.....
<button type="button" onclick="displayDate()">显示日期</button>

2.点击一秒后出现提示框

<button onclick="myFunction()">点我</button>
<

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 59

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值