HTML DOM - 事件处理方式

最新推荐文章于 2023-10-20 14:16:02 发布
最新推荐文章于 2023-10-20 14:16:02 发布
阅读量365 收藏
点赞数
分类专栏： 012W3C标准 文章标签： Dom html w3c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinhoward/article/details/53457841
版权


一、html中事件处理之用函数来处理


<!DOCTYPE html>
<html>
<head>

<script>function changetext(clickedObject){
   clickedObject.innerHTML="Click is So Cool!";}
</script></head>

<body>
 <h1 οnclick="changetext(this)">请点击这段文本！</h1></body>

</html>


 

 

 

 
二、按钮的点击事件 

 

 

<!DOCTYPE html>
<html>
<body>

<p>点击按钮执行点击函数的示例</p>

<button οnclick="showDate()">显示日期</button>

<script>
function showDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"><strong>Miracle will happen!</stong></p>

</body>
</html>
 

 

三、onLoad（）方法的使用
 

 

<!DOCTYPE html>
<html>
<body οnlοad="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

 

 四、onChange方法的使用 

 

 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入你的英文名：<input 

type="text" 
id="fname" 
οnchange="myFunction()">


<p>当光标的焦点离开输入框时，被触发的函数会将您输入的文本转换为大写字母。</p>

</body>
</html>

 

 

 

 


 
 


 
 


 
 


 
 

 
 <!DOCTYPE html><html><head><script>function changetext(clickedObject){ 
 
clickedObject
 
 .innerHTML="Click is So Cool!";}</script></head><body><h1 οnclick="changetext(this)">请点击这段文本！</h1></body></html> 
 
 
 
 
 
 
 二、按钮的点击事件 
 
 
 
 
 
<!DOCTYPE html>
<html>
<body>

<p>点击按钮执行点击函数的示例</p>

<button οnclick="showDate()">显示日期</button>

<script>
function showDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"><strong>Miracle will happen!</stong></p>

</body>
</html>
 


                

        

        

    




    

      

        

            

              
                
                  反者道之动-弱者道之用
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
dom-to-pdf:为HTML DOM元素提供优化的PDF输出

				
			

			

				

					03-13
				

			

		

		

			
				
3. **jQuery**：jQuery是一个广泛使用的JavaScript库，简化了DOM操作和事件处理。DOM-to-PDF可能利用jQuery来更方便地处理HTML元素和用户交互。 4. **局限性：** 当从HTML画布生成图像时，由于浏览器的限制，图像的...

			
		

	



                

              
                



	

		

			

				
					
HTML值改变事件

				
			

			

				

					weixin_30649641的博客
				

				

					08-21
					
					481
					
				

			

		

		

			
				
1、动态拼接html【表格中，如bootstrap grid】

return '<input type="text" name="bjce" onchange="change(this,'+grzh+','+rowdata.ROW_ID+
  ')" grjcbl="'+rowdata.GRJCBL+'" dwjcbl="'+rowdata.DWJCBL+'" value=...

			
		

	



                


  
              

                


	

		

			

				
					
Html事件处理

				
			

			

				

					qq_17732895的专栏
				

				

					12-21
					
					212
					
				

			

		

		

			
				
1，  Form事件（应用到所有HTML元素，但常用与form表单内）
 
Onblur属性：焦点外触发事件
如：
Functiondisplay()
{
        Alert(“onblur”);  //即当用户离开输入框后显示此对话框提示；
}



 
 
Onfocus属性：焦点处触发事件
如：
Functiondisplay()
{

			
		

	





	

		

			

				
					
大数据H5前端开发——事件处理

					
最新发布

				
			

			

				

					未来社会二十年发展的核心技术趋势由ABCD四个字母组成，分别是AI（人工智能）、BlockChain（区块链）、Cloud（云）、和Data（大数据）每一次进步都有新的认知和感触
				

				

					10-20
					
					436
					
				

			

		

		

			
				
在H5前端开发中，事件处理是非常重要的一部分。通过事件处理，可以实现对用户操作的响应和交互。我们来编写程序，体验一下事件处理，我们来编写两个案列，体验一下事件处理。

			
		

	



		

			
		



	

		

			

				
					
处理事件

				
			

			

				

					陈杰的专栏
				

				

					06-05
					
					1154
					
				

			

		

		

			
				
 New Document function do_totals1(){document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 100);document.all.pleasewaitScreen.style.visibility="visible";window.setTimeout(do_totals

			
		

	





	

		

			

				
					
解释HTML中事件和事件处理,深入理解在JS中通过四种设置事件处理程序的方法

				
			

			

				

					weixin_39814088的博客
				

				

					06-07
					
					193
					
				

			

		

		

			
				
所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式：第一种方式(HTML标签属性):上面的代码是通过设置HTML标签属性为给button 添加了点击事件,当点击button 按钮时会弹出这个button的id,即btn1。这种通过HTML属性来注册事件...

			
		

	





	

		

			

				
					
前端开源库-html-dom-parser

				
			

			

				

					08-30
				

			

		

		

			
				
5. **灵活性与扩展性**: html-dom-parser允许开发者自定义解析规则，比如设置默认的标签闭合方式、处理特定的HTML标签等。这增强了库的灵活性，满足了不同项目的需求。  6. **实际应用**: 在实际开发中，这个库常...

			
		

	





	

		

			

				
					
Html DOM-开源

				
			

			

				

					04-22
				

			

		

		

			
				
1. `HtmlDOM.cmbx`：这可能是一个项目的组合包文件，包含库的所有组件，或者是一个编译后的程序集。 2. `Pvax.Html.Tests`：这看起来是一个测试项目，用于验证`Pvax.Html`库的功能和正确性。通过单元测试，开发者...

			
		

	





	

		

			

				
					
Laravel开发-php-simple-html-dom-parser 

				
			

			

				

					08-28
				

			

		

		

			
				
这个例子展示了如何创建一个HTMLDOM对象，找到第一个`<h1>`元素，并打印其文本内容。此外，`php-simple-html-dom-parser`还支持CSS选择器，使得定位和操作HTML元素更加便捷。  在Laravel项目中，这个解析器常用于...

			
		

	





	

		

			

				
					
dom-serializer：渲染dom节点

				
			

			

				

					02-09
				

			

		

		

			
				
`dom-serializer` 是一个非常有用的工具库，用于将DOM节点或者DOM节点数组转换为字符串形式，这在处理动态生成的内容或进行序列化操作时特别有用。它可以帮助开发者将内存中的DOM结构以文本的形式输出，便于存储、...

			
		

	





	

		

			

				
					
DOM事件处理方式

				
			

			

				

					huangbaokang的博客
				

				

					09-19
					
					539
					
				

			

		

		

			
				
DOM事件处理分DOM 0级处理，2级处理，以及兼容IE8以下版本。以下代码可以兼容各大浏览器版本。<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件</title>
</head>
<body>
    <div id="div">
        <button id="btn">

			
		

	





	

		

			

				
					
DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式

				
			

			

				

					code_ja的博客
				

				

					07-15
					
					1871
					
				

			

		

		

			
				
1.传统的方式是将一个函数赋值给一个事件处理程序属性。看看DOM0级方式例如：var btn = document.getElementById("myBtn");
btn.onclick = function() {
    alert(this.id); //"myBtn"
}使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此程序中的this引用的是当前的元素btn，可以通过this访

			
		

	





	

		

			

				
					
Html之getElementById()方法&getElementsByTagName()方法示例

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					11-20
					
					3473
					
				

			

		

		

			
				
HTML DOM 对象 - 方法和属性一些常用的 HTML DOM 方法：getElementById(id) - 获取带有指定 id 的节点（元素）appendChild(node) - 插入新的子节点（元素）removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：innerHTML - 节点（元素）的文本值parentNode - 节点（元素）的父节点ch

			
		

	





	

		

			

				
					
HTML DOM appendChild() 、insertBefore(node, child)、removeChild(child)、replaceChild(node, child)方法使用指南

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					12-04
					
					2012
					
				

			

		

		

			
				
1、首先创建一个节点；
2、然后创建一个文本节点；
3、然后将文本节点添加到LI节点上；
4、最后将节点添加到列表中。

			
		

	





	

		

			

				
					
Dom学习之设置超链接获取焦点和失去焦点

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					10-29
					
					1760
					
				

			

		

		

			
				
知识点：
1、设置链接获取焦点的方法focus（）
2、设置链接失去焦点的方法blur（）


a:active {color:green}



function getfocus()
{document.getElementById('myAnchor').focus()}

function losefocus()
{document.getElementById('myAnchor')

			
		

	





	

		

			

				
					
Dom学习之更改一个链接的文本、URL 以及 target

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					10-29
					
					741
					
				

			

		

		

			
				
在本例中，我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。

			
		

	





	

		

			

				
					
HTML DOM 访问之nodeValue和nodeName使用

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					11-21
					
					671
					
				

			

		

		

			
				
Hello World!
本例演示 getElementById 方法的使用方法：



document.write("");
x=document.getElementById("intro");
document.write("getElementById Return Value is：" + x + "");
document.write("getElementById Return V

			
		

	





	

		

			

				
					
无序的列表&range是否支持判断

				
			

			

				

					長い冬が越さなければ春が来ない。
				

				

					12-01
					
					396
					
				

			

		

		

			
				
一个无序列表的例子：


  苹果 document.implementation.hasFeature('Range','2.0')
  橘子
  香蕉




var supportRange=document.implementation.hasFeature('Range','2.0');
var supportRange2=(typeof document.createRange=='f

			
		

	





	

		

			

				
					
laravel php-simple-html-dom-parser

				
			

			

				

					08-25
				

			

		

		

			
				
它具有优雅的语法和强大的扩展性，使得开发人员可以轻松构建功能丰富的应用程序。  另一方面，php-simple-html-dom-parser是一...无论是构建Web应用程序还是处理网页数据，这两个工具都能在开发过程中发挥重要的作用。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值