jQuery是怎样监听到事件的？

Posted 2023-04-23

<select id="choice" onchange="test()">
<optionvalue="">select</option>
<optionvalue="good">Good Guys</option>
<optionvalue="bad">Bad Guys</option>
</select>

<script type="text/javascript">
$('select').change(function ()
alert('test1');
);
function test()
alert('test');

</script>

比如说：用JavaScript来做的话，需要在控件上写上onchange事件，由用户点击select控件，由html触发js，这好理解；可是用jQuery来做的话，是怎样执行的change事件呢，是怎样触发的jQuery呢？
如上：js先执行，jQuery后执行，这是怎么回事呢？

1，首先JQuery的执行时间，是在文档的DOM加载完成后执行。
2，jquery把事件和DOM绑定。然后当有事件发生的时候，就会调用合适的处理函数。
3，如果你真的想了解浏览器问什么执行这些时间的话，你可以去试着去了解W3CDOM标准。 参考技术A 给你举个例子
文档必须先引用jquery包
<script>
$(document).ready(function()
$("#click").click(function()
alert("你点击了click")
)
)
</script>

<div id=click>
click
</div>

用户点击id为click的容器，触发事件，弹出“你点击了click”追问

“用户点击id为click的容器，触发事件”，你那只是个id，你怎么能告知jQuery呢，浏览器怎么知道执行相应的jQuery代码呢？

追答

$("#click").click(function()
#click表示查找id为click的容器，不管这个容器是div或者span或者html的其他任何元素，只要id为click的都会被查出来，然后执行点击事件，如果执行鼠标经过事件那么就应该修改为
$("#click").hover(function()

明白？

解决当Activity弹窗后，无法监听到onKeyUp()和onKeyDown()按键事件

守护公主的永远是骑士，
而公主选择的永远是王子。

— 广州 · 14℃ · 阴天 · 天暗下来，你就是阳光~

问题

监听音量+按键事件，但由于Dialog显示时，监听失败：

解决后：

有两种方式轻松解决上面的问题，下面我会详细讲述如何解决的。

解决办法

其实最根本的问题就是Activity失去焦点了，当我按下音量+键时，会产生ACTION_DOWN/ACTION_UP两个KeyEvent事件分发，最终交由Activity或者View处理，很明显当弹窗显示时，弹窗获取了当前焦点，而onKeyUp()和onKeyDown()方法是重写在Activity里，因此Activity是无法获取到按键事件的。

• 给弹窗设置 setOnKeyListener() 按键监听

这个是最简单的解决办法，代码示例：

        
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        dialog = builder.create();
        dialog.setTitle("弹窗示例");
        dialog.setView(view, 0, 0, 0, 0);
        dialog.setOnKeyListener(new DialogInterface.OnKeyListener() 
            @Override
            public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) 
                //指定按键事件：监听音量+键松开事件
                if (keyCode == KeyEvent.KEYCODE_VOLUME_UP && event.getAction() == KeyEvent.ACTION_UP) 
                    // TODO: 2021/3/21
                   Toast.makeText(this, "音量+键 被点击！", Toast.LENGTH_SHORT).show();
                
                return false;
            
        );

• 重写弹窗的dispatchKeyEvent事件

这个方法稍微复杂点，需要先新建一个MyDialog，继承AlertDialog，然后重写dispatchKeyEvent()方法，预留接口给Activity回调，使其更加灵活，代码示例：

MyDialog类

public class MyDialog extends AlertDialog 

    public MyDialog(Context mContext) 
        super(mContext);
    

    @Override
    public boolean dispatchKeyEvent(android.view.KeyEvent event) 
        //指定按键事件：监听音量+键松开事件
        if (event.getKeyCode() == android.view.KeyEvent.KEYCODE_VOLUME_UP && event.getAction() == KeyEvent.ACTION_UP) 
            if (mKeyEventListener != null) mKeyEventListener.onKeyEvent();
        
        return super.dispatchKeyEvent(event);
    

    private OnKeyEventListener mKeyEventListener;
    public void setOnKeyEventListener(OnKeyEventListener mKeyEventListener) 
        this.mKeyEventListener = mKeyEventListener;
    
    public interface OnKeyEventListener 
        void onKeyEvent();
    

在Activity里使用：

        myDialog = new MyDialog(this);
        myDialog.setTitle("自定义弹窗");
        myDialog.setView(view, 0, 0, 0, 0);
        myDialog.setOnKeyEventListener(new MyDialog.OnKeyEventListener() 
            @Override
            public void onKeyEvent() 
                // TODO: 2021/3/21
                Toast.makeText(this, "音量+键 被点击！", Toast.LENGTH_SHORT).show();
            
        );
        

非常感谢你能看到这里，如果能够帮助到你是我的荣幸！