I'll create an HTML element with various mouse and drag events, including onclick and other related events. We'll use console.log to display when these events are triggered. Here's an example using a div element:

This HTML file creates a blue box with the text "Interact with me!" Inside the box, we've implemented various mouse and drag events. Here's a breakdown of the events:

1. onclick: Triggered when the box is clicked.
2. onmousedown: Triggered when a mouse button is pressed down on the box.
3. onmouseup: Triggered when a mouse button is released over the box.
4. onmousemove: Triggered when the mouse moves while over the box.
5. onmouseenter: Triggered when the mouse enters the box.
6. onmouseleave: Triggered when the mouse leaves the box.
7. ondragstart: Triggered when the user starts dragging the box.
8. ondrag: Triggered repeatedly while the user is dragging the box.
9. ondragend: Triggered when the user stops dragging the box.

Each of these events will log a message to the console when triggered. To see the results:

1. Open this HTML file in a web browser.
2. Right-click and select "Inspect" or press F12 to open the developer tools.
3. Go to the "Console" tab in the developer tools.
4. Interact with the blue box by clicking, moving the mouse over it, and dragging it.

You'll see various messages appear in the console as you interact with the box, corresponding to the different events being triggered.

Note: The ondragover event is used to prevent the default drag behavior, which can interfere with seeing the drag events in some browsers.

This example demonstrates how to implement and log various mouse and drag events on an HTML element. You can modify or expand upon this code to create more complex interactions or to perform specific actions in response to these events.