[JavaScript知识库][业余难点自学] contextmenu 和 spellcheck

4. 在 HTML5 中，contextmenu 和 spellcheck 是

• HTML属性
• HTML元素
• 事件属性
• 样式属性

解析：oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单，spellcheck 属性规定是否对元素进行拼写和语法检查

HTML contextmenu 属性（失效）

<element contextmenu="menu_id">
目前只有 Firefox 浏览器支持 contextmenu 属性

• 规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单
• 属性的值是需要打开的 <menu> 元素的 id

HTML DOM oncontextmenu 事件

HTML中:
<element oncontextmenu="myScript">

JavaScript中:
object.oncontextmenu=function(){myScript};

JavaScript中, 使用addEventListener()方法:
object.addEventListener("contextmenu", myScript);

所有浏览器都支持oncontextmenu事件，contextmenu元素只有Firefox浏览器支持

• 在元素中用户右击鼠标时触发并打开上下文菜单 菜鸟教程测试

<div oncontextmenu="myFunction('HTML方式')" id="myDiv">
    <p>鼠标右键点击触发</p>
</div>
<script>
    // document.getElementById("myDiv").oncontextmenu = function() {
    //     myFunction('JS方式');
    // };

    // addEventListener内的function不能加括号()，传参可使用bind方法
    // 传参也可以使用不带参数的function嵌套
    document.getElementById("myDiv")
        .addEventListener("contextmenu", myFunction.bind(null,'JS监听方式'));

    function myFunction(n) {
        alert("oncontextmenu触发：" + n);
    }
</script>

HTML <menu> 标签（失效）

<menu label="文本值" type="list|context|toolbar">
目前主流浏览器并不支持 <menu> 标签

• list：默认值，规定一个列表菜单，一个用户可执行或激活的命令列表（li 元素）

• context：规定一个上下文菜单，菜单必须在用户与命令进行交互之前被激活

• toolbar：规定一个工具栏菜单，主动式命令，允许用户立即与命令进行交互

JavaScript 中 call()、apply()、bind() 的用法

• 用来重定义 this 对象 菜鸟教程测试