点击事件监听器的五种写法

第一种方式:匿名内部类方式

        这种方式是官网推荐使用 的一种方式,即使用setOnClickListener()函数的方式,参数直接使用匿名,实现OnClickListener接口的onclick()方法。

在使用该方法的时候,一定不要把包import错了。* * 要导入android.view.View.OnClickListener* 在此处不要把包导入错了*/fun_btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stubToast.makeText(getApplicationContext(), "通过setOnClickListener()方法实现",Toast.LENGTH_SHORT).show();}});</span>
第二种方式: 接口方式
        定义一个内部类实现OnClickListener接口。在这里可以实现对多个按钮的监听。
首先在当前Activity实现OnclickListener接口:
[java]  view plain  copy
 print ?
  1. public class MainActivity extends Activity implements OnClickListener  

然后就是实现接口方法:
[java]  view plain  copy
 print ?
  1. public void onClick(View v) {  
  2.         // TODO Auto-generated method stub  
  3.         switch (v.getId()) {    
  4.         case R.id.button3:        
  5.             ContactTest c = new ContactTest();  
  6.             c.testInsert(context);   
  7.             break;    
  8.         case R.id.button4:  
  9.             ContentResolver cResolver1=this.getContentResolver();  
  10.             Uri uri4=ContactsContract.RawContacts.CONTENT_URI.buildUpon()  
  11.                     .appendQueryParameter(ContactsContract.CALLER_IS_SYNCADAPTER, "true").build();  
  12.              cResolver1.delete(uri4, nullnull);  
  13.         default:    
  14.             break;    
  15.         }    
  16.           
  17.     }     


最后就是绑定到Button上即可:
[java]  view plain  copy
 print ?
  1. <span style="font-size:12px;">button.setOnClickListener(this); </span>  
第三种方式: 指定button 的onClick属性方式
先在layout文件中指定onClick属性:
[java]  view plain  copy
 print ?
  1. <Button  
  2.         android:id="@+id/bt_dail"  
  3.         android:layout_width="wrap_content"  
  4.         android:layout_height="wrap_content"  
  5.         android:onClick="Call"  
  6.         android:text="拨打此号码" />  
然后到Activity中实现这个onButtonClick方法:
[java]  view plain  copy
 print ?
  1. public void dailPhone(View view){    
  2.     Call();    
  3. }  
第四种方式: 类中实现点击事件
1、在父类中调用点击事件
[java]  view plain  copy
 print ?
  1. bt_dail.setOnClickListener(new MyButtonListener());  
2、创建内部类
[java]  view plain  copy
 print ?
  1. private class MyButtonListener implements OnClickListener{    
  2.        /**  
  3.        * 当按钮被点击的时候调用  
  4.        */    
  5.        @Override    
  6.        public void onClick(View v) {    
  7.            callPhone();    
  8.         }                 
  9.  }    

第五种方式:
把事件处理单独成一个类,基本没什么好处,除非此事件处理器经常被复用。

转载:http://blog.youkuaiyun.com/chaoyu168/article/details/49471325
<think>嗯,用户之前让我注释了一段JavaScript代码,现在他们又要求用实例介绍事件监听器的各种写法和用法,并且要注释。我需要确保回答结构清晰,符合之前设定的规则,比如使用中文、正确的LaTeX格式,以及分步骤讲解。 首先,用户可能正在学习JavaScript的事件处理,想了解不同的监听器写法,比如传统方式、匿名函数、箭头函数、事件对象的使用,以及事件委托等高级用法。他们可能在实际项目中遇到了不同写法,需要理解它们的区别和适用场景。 接下来,我需要考虑如何组织内容。用户要求“各种写法和用法”,所以应该涵盖基本写法、不同函数类型、事件对象参数、事件委托、一次性事件、移除监听器、多个事件类型绑定等。每个例子都需要注释,说明优缺点或适用情况。 还要注意用户之前的反馈,他们可能希望回答详细且实用,所以每个例子要简短但完整。比如,对比使用匿名函数和具名函数在移除监听时的区别,或者事件委托如何减少内存消耗。 另外,用户可能对事件传播机制(冒泡和捕获)不太清楚,需要简单解释。同时,他们可能不知道passive选项对性能的影响,这也是一个重要的点。 最后,总结部分要比较不同方法的优缺点,帮助用户根据情况选择合适的方式。确保注释清晰,语法正确,符合LaTeX格式要求,比如变量用$...$,独立公式用$$...$$,虽然在这个问题中可能用不到太多数学公式,但需要注意行内代码的正确标注。</think>好的!我将通过具体示例为您详细讲解事件监听器的各种写法和用法,每个示例都包含详细注释说明: --- ### 一、基础写法示例 ```javascript // 方式1:传统匿名函数写法 element.addEventListener('click', function(event) { console.log('传统匿名函数触发', event.target); }); // 方式2:箭头函数写法 element.addEventListener('mouseover', (e) => { console.log('箭头函数触发', e.clientX, e.clientY); }); // 方式3:具名函数引用 function handleKeyPress(event) { console.log('按键代码:', event.keyCode); } document.addEventListener('keydown', handleKeyPress); // 注意不加() ``` --- ### 二、事件对象使用 ```javascript const btn = document.querySelector('#myButton'); btn.addEventListener('click', function(e) { // 阻止默认行为(如表单自动提交) e.preventDefault(); // 阻止事件冒泡 e.stopPropagation(); // 访问事件目标 console.log('事件目标:', e.target); // 获取坐标信息 console.log(`点击坐标 X:${e.clientX}, Y:${e.clientY}`); }); ``` --- ### 三、事件委托模式 ```javascript // 通过父元素监听子元素事件(适用于动态内容) const list = document.querySelector('#itemList'); list.addEventListener('click', (e) => { // 通过事件冒泡机制判断目标元素 if(e.target.matches('.list-item')) { console.log('点击的列表项ID:', e.target.dataset.id); } }); ``` --- ### 四、一次性事件监听 ```javascript // 只执行一次的事件(自动移除) const modal = document.querySelector('#welcomeModal'); modal.addEventListener('click', function handleFirstClick() { console.log('首次点击后不再监听'); }, { once: true }); ``` --- ### 五、移除事件监听 ```javascript // 定义具名函数以便后续移除 function scrollHandler() { console.log('滚动事件触发'); } // 添加滚动监听 window.addEventListener('scroll', scrollHandler); // 3秒后移除监听 setTimeout(() => { window.removeEventListener('scroll', scrollHandler); console.log('已移除滚动监听'); }, 3000); ``` --- ### 六、事件阶段控制 ```javascript // 捕获阶段触发(默认是冒泡阶段) document.querySelector('#outer').addEventListener( 'click', () => console.log('捕获阶段触发'), true // 第三个参数设置useCapture ); // 冒泡阶段触发 document.querySelector('#inner').addEventListener( 'click', () => console.log('冒泡阶段触发'), false ); ``` --- ### 七、多事件类型绑定 ```javascript const inputField = document.querySelector('#username'); // 同时监听多个事件类型 ['focus', 'blur', 'input'].forEach(eventType => { inputField.addEventListener(eventType, (e) => { console.log(`事件类型: ${e.type}, 值: ${e.target.value}`); }); }); ``` --- ### 八、高级配置选项 ```javascript // 使用passive改善滚动性能 window.addEventListener('wheel', (e) => { console.log('滚动中...'); }, { passive: true }); // 告诉浏览器不会调用preventDefault() // 信号中止控制器 const controller = new AbortController(); element.addEventListener( 'mousemove', (e) => console.log('鼠标移动'), { signal: controller.signal } ); // 中止所有关联事件监听 controller.abort(); ``` --- ### 对比总结表格 | 方法特点 | 适用场景 | 优点 | 注意事项 | |-----------------------|---------------------------------|-------------------------|-------------------------| | 匿名函数 | 简单临时事件 | 写法简洁 | 无法单独移除 | | 具名函数 | 需要复用/移除的事件 | 可维护性强 | 需注意this绑定问题 | | 箭头函数 | 需要保持上下文 | 自动绑定词法作用域 | 没有自己的this和arguments | | 事件委托 | 动态生成元素/大量子元素 | 减少内存消耗 | 需要正确判断目标元素 | | passive选项 | 滚动/触摸等连续事件 | 提升页面流畅度 | 不能使用preventDefault() | | AbortController | 需要批量移除监听 | 现代化管理方式 | 兼容性需注意 | 希望这些示例能帮助您全面理解事件监听器的使用!如果有具体场景需要进一步说明,请随时告诉我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值